Have you been asked by your client, boss or designer to create some nice animations on the next web project?

They say: “I have seen this cool effect on the other site, can you do something similar?” or “I have this idea for an animation, can you do it?” and you go: “Sure I can.” or “Hm, I don’t know…”

Tip of the day: Never say “No, I can’t do it.” That’s not what a modern front-end developers say.

But there is so many options

The situation could be a scary one, especially if it’s the first time you will be working with CSS or JavaScript animations.

There’s too many options to choose from and too many questions to be answered. CSS or JavaScript animations? Should I use a plugin and which plugin or library is the right for me? Where do I start?

Luckily, you’ve come to the right place.

Who is this guide for?

This guide is aimed at a front-end web developers looking for a direction when it comes to web animations.

This guide to CSS and JavaScript animations will show you the right options based on your skill level and will make your decision when selecting the right tools for animations much easier.

It will also save you a time haunting around the web, instead you can start having fun with CSS or JavaScript animations.

Are you a complete beginner when it comes to HTML5/CSS3 and JavaScript or have you been developing websites for a while, but found animations too complicated to do?

Are you a front-end development professional with many years of experience and want to bring your web animations to the next level?

Here are the options, regardless of your skill level or a stage of your career.

1. Simple CSS3 Animations and Transitions

CSS3 animations and transitions are the easiest way to spice up your project. In a simple terms they let you change a CSS property over a specific time duration.

Without the knowledge and use of JavaScript you are only limited to trigger your animations on :hover or :active states.

This makes the usage pretty limited, but anyone with a basic CSS skills can implement them quite easily and you would be surprised how simple fading of a link color could make a big impact on the overall look and feel of your website.

The difference between CSS3 Animations and Transitions is that transitions let you go from point A to point B without any points in between, but animations can have multiple keyframes.

The syntax for CSS3 animations with multiple keyframes could get quite full on and I wouldn’t recommend it to a beginner.

Practical use:

• links color fading in and out on :hover
• buttons background color fading in and out on :hover
• move elements and resize them on :hover

Other resources:

• CSS3 Animations vs Transitions by Kirupa Chinnathambi
• CSS3 Transition on CSS-tricks.com
• CSS3 Animations on CSS-tricks.com

2. CSS3 Animation Libraries

CSS3 animation libraries are a handy collections of a prebuilt CSS3 effects.

Many talented developers and designers have put countless hours into creating these libraries and all you have to do is to include a stylesheet and add a class to the element you want to animate and specify which animations to use.

Some of these libraries require a small piece of JavaScript or jQuery to be included in your project, but this is always well explained in the library documentation.

Don’t forget to thank the authors if you decide to use it on your project.

Practical use:

• fancy button hover states
• image caption animations
• page transitions
• modal popup animations
• off canvas menu transitions

CSS3 Animations libraries:

• Animate.css by Daniel Eden
• Magic.css by Christian Pucci
• Effeckt.css by H5BP
• Animatable by Lea Verou
• Page Transitions by Tympanus.net
• Morf.js by Joe Lambert

3. Advanced CSS3 Animations

When your designer or client has a unique creative idea which requires multiple keyframes, you will need to dive into CSS3 Keyframe Animations.

In simple terms you would use CSS3 Keyframes if you need to animate an element from point 1 to 5, but stop at point 2 for a while, resize the element at point 3 and then quickly move through point 4 before slowly stopping at the point 5.

You will also need to write a little bit of JavaScript to trigger your animations at the right time.

For example you might have a carousel and want to have one of the slides which contains a few HTML elements to animate them into the view in a sequence one by one when the slide becomes active.

Most of the modern carousels render an .active class on the current slide so you would include something like this in your stylesheet:

.active .animated_element {
  -webkit-animation: myanim 5s infinite; /* Chrome, Safari 5+ */
     -moz-animation: myanim 5s infinite; /* Firefox 5-15 */
       -o-animation: myanim 5s infinite; /* Opera 12.00 */
          animation: myanim 5s infinite; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
}
@-webkit-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-moz-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@-o-keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }
}
@keyframes myanim {
  0%   { opacity: 0.0; }
  50%  { opacity: 0.5; }
  100% { opacity: 1.0; }

The syntax for CSS3 animations with multiple keyframes contains a lot of code.

When you multiply this by the number of elements you want to animate, your stylesheet can gain hundreds of lines of code very quickly.

Even though you might ‘have it under control’, handing your stylesheet to another developer will certainly create a few headaches.

I see the main drawback of CSS3 animations in the inability to easily trigger animation of an element when another animation has finished.

However if you for example just want to slide your sidebar or shopping cart into the browser viewport then CSS3 animations are perfectly fine.

Practical use:

• single element animation with multiple keyframes
• a few elements animating with multiple keyframes
• hidden sidebar sliding into a view

Helpful tools

• CSS3 Please – generate cross-browser compatible CSS3 animation
• CSS Animate – quickly create CSS3 keyframes animation in your browser
• Ceaser – handy for creating custom easing option

Other resources:

An Introduction To CSS3 Keyframe Animations by SmashingMagazine

What are your JavaScript options?

If you know a little bit of JavaScript, then you might be just a few lines of code away from an impressive animation effect.

In the second part of this guide I share a few options when it comes to JavaScript animations for the web.

Read Part 2 →

Are you into a parallax scrolling animations?

Join me in the Parallax Scrolling Master Class and learn how to build a parallax scrolling website from scratch using Skrollr.js.

I will teach you:

• how to move not only background images, but any element on the page
• how to be in control of your animations
• how to make it responsive without a headache
• or how to turn Skrollr off on mobile devices