CSS3 Animations – Full-featured Animations

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

You might be surprised but these are the first native web animations ever. Is that really surprising? All existing animation methods are either encapsulated in their own technological framework (Gif, Flash, Silverlight, etc.) or they animate using a method that was not designed for that purpose: Javascript.

So what is the difference between an animation and a transition? When using (animation), you basically can control the particular event much better. Moreover, you are not limited to the CSS properties that the animated object has before the animation starts. Transitions (transition), on the other hand, are meant for simple animated transitions which go from one state to another.


First, you have to define an animation using the @keyframes at-rule. Then you can call it anywhere and adjust it to your needs.

@keyframes _animation_name_ {
  _duration_ { _property_declaration_ }
  _duration_ { _property_declaration_ }

#example {

Now, let’s explain all properties:


This can be used separately as animation-name: my_animation.


Set it in seconds (.5s) or milliseconds (500ms). The default value is animation-duration: 0s.


This is similar to transition. You can use the pre-defined function or define your own. A separate declaration with a default value looks like this: animation-timing-function: ease.


This is the specified time the animation will wait before it is executed. The value is defined in seconds and milliseconds and the default value is null: animation-delay: 0.


The interaction can be set as a number or as an “infinite number” using the infinite key word. The default value is animation-iteration-count: 1.


Unlike transitions, the animation keyframe will default back to its original state (0%) when iterated and then continue to its target. If we want to blend several animations smoothly, we need to set the animation-direction property to the alternate value. It is used separately as animation-direction: alternate.


The default state of our animation will look like this: before the animation starts and after the animation has ended, no CSS properties from the animation keyframes are applied to the animated element. However, using the animation-fill-mode property, we can change that.

Four properties can be applied:

  • none - the default value.
  • backwards - this value will apply values defined in the keyframe 0% even if the element has different property settings.
  • forwards - after the iteration of an animation ends, the object will remain in the same state as in keyframe 100% and will not go back.
  • both - this will apply both forwards and backwards.


This property is not a part of the animation shorthand and is to be used separately. You can temporarily stop the animation by using the animation-play-state: paused declaration. I imagine the function of the running value is self-explanatory.

@keyframes – Frames of the Animation Sequence

Keyframes define the animation start (using the from key word or 0%), progress (using percentage of the duration) and end (using the to key word or 100%). The change between keyframes is defined by the browser and you only have to set the start and end. The number of keyframes is not limited.

Browser Support

CSS3 animations are not supported by IE prior to version 9: caniuse.com/#feat=css-animation

The strategy for supporting animations in older browsers depends heavily on the type of animation.

When using animations as an enhancement (i.e. for aesthetical purposes in the user interface which the user will not miss if not executed), there is no reason to search for an alternative solution.

If, however, the animation carries information (e.g. a progress bar when loading a file), it is necessary to substitute a CSS3 animation for Javascript or detect browsers which do not support CSS3 animations and come up with an alternative solution for them.




On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide


Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties



Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more