So, what’s the difference between the Transition property and the Animation property?
There are two basic differences:
- The first major difference is that transitions only have a ‘to’ and ‘from’ state. Transitions also only effect once a pseudo class (such as
:hover, :focus, :checked, etc) is triggered or removed.
- The second notable difference between animations and transitions are @keyframes. Transitions only have two @keyframes (the ‘to’ and ‘from’ states), but animations can have an endless number of @keyframes. The keyframe positions are set with percentage values. You could make a ball spin and bounce up and down with only few lines of CSS (Sort of. Since you’ll have to do everything multiple times with vendor prefixes, the CSS gets quite a bit longer).
The animation property and keyframes go hand in hand. The animation property’s ‘values’ are the element-to-be-animated’s options and the keyframes are the actions it should follow.
A simpler way to put it is:
Animation: How to animate – duration, speed, etc.
Keyframes: The properties to animate – From/To.
The following animation property is shorthand for the various CSS properties which will be covered later in this section.
The name of the animation. This value links the animation properties to the keyframes. This value is required, without this the keyframes can’t be referenced.
The time it takes for the animation to complete in seconds.
Supported timing-function keywords are: linear, ease, ease-in, ease-in-out, ease-out, step-start, step-end. The cubic-bezier() CSS function is supported by animation-timing-function and can be used to create custom timing-functions.
If left out, this property defaults to ease.
The amount of time, in seconds, waited before the animation begins after the animation has been applied to the element.
If left out, this property defaults to 0s.
The amount of times the animation should run. Negative values are treated as 1 and fraction values play that fraction of that animation. For example 1.5 will play through the animation 1 time and stop halfway through the second iteration. “infinite” does what you’d imagine, it doesn’t stop the animation.
If left out, this property defaults to 1.
The direction of the animation. This property has 4 values: normal, alternate, reverse, alternate-reverse.
The “normal” state would play through the keyframes from the lowest percentage to the highest. This property can be set to “reverse” where it will play from 100% down to 0%.
“alternate” runs the animation in reverse every second iteration, so the animation goes from 0% to 100% the first time and then from 100% to 0% the second time and repeats that pattern. This is property gives the effect that the animation doesn’t restart.
“reverse” runs the keyframes in reverse, for example it begins at 100% and ends at 0%.
Lastly, “alternate-reverse” begins at 100% and reverses every second iteration.
If left out, this property defaults to ‘normal’.
Along with the animation-name, keyframes are the most important aspects of CSS animations. Keyframes are the animation instructions.
Percentage values are used to indicate the point at which the values of a keyframe should be achieved. The “from” keyword references 0% and the “to” keyword references 100%. Functionally the following is identical:
Quick demonstration based on the previously covered properties
In the above example I’ve made use of:
The 4 “ball” keyframes are telling the element to animate through each of the 4 keyframes within 6 seconds, while making use of a the boring ‘ol linear timing-function and to do this indefinitely.
As you can see, the keyframes syntax is similar to the media query syntax (And SCSS!) – which most people have been exposed to. Hopefully that makes you feel more at home!
That’s really all there is to it. Let’s go over a more detailed tutorial to make this even more digestible.
First we have to come up with a cool animation idea. I’m a big fan of Paul Irish (and you should be too) so I’m going to do some sort of animation involving him.
I’ve taken this image and cut out the arm quite badly, so I have two images. The plan is to layer the arm on top of the larger image and animate it.
First we need to define the html
Next, the CSS
So a recap of the above CSS:
- Set the basic properties to #paul
- Absolutely position .arm and set the animation property with the relevant values. I’ve named the animation “pumping-iron”, set the animation-duration to 3s, used the boring-old linear timing-function and set the loop to infinite because Paul never gets tired of pumping-iron.
- Keyframe #1 sets the starting position of Paul’s arm and keyframe #2 sets the end position. The animation-direction value “alternate” tells the animation that once it has completed, it should alternate the keyframes. This brings the animation back to the starting position. The animation-iteration-count value “infinite” tells the animation to continue forever.
You would really feel the vendor-prefixes on this one. A prefix on the @keyframes means you duplicate that entire keyframe section 5 times! Looking at the prefixed version of animation and @keyframes is definitely intimidating, but as long as you realize it’s just CSS bloat you should be fine. Let’s take a look at this for visual reference… Be prepared:
And now for the final product!
Cross Browser compatibility
To quote HTML5Please: “For now, either use animations only to provide non-essential aesthetic enhancements or use feature detection to provide an alternative experience for browsers that do not support this feature.”
…And because Modernizr is so damn cool and simple to use I’ll briefly explain how exactly to make use of this feature detection and fallback option.
I think you should all be using CSS animations right now, provided you include the vendor-prefixed versions and have a decent fallback for non-modern browsers.
And the MDN’s animation example
Another step by step guide for keyframe css animation