CSS3 Animation Step by Step Guide

I tried to write a CSS3-animation manual as clear and simple as possible. Let’s go!

In order to use animation in your project, you only have to do two things:

1. Create an animation.

2. Connect it to the element that has to be animated and indicate required features.

The animation is a set of key frames, which is stored in `css` and looks like this:

@keyframes test-animation {0% {width: 50px;}100% {width: 150px;}}

Let us sort out what we have here. The keyword `@keyframes` indicates the animation itself. Next comes its name, I called it `test-animation`. Curved brackets contain the list of key frames. In this case it is the starting frame `0%` and the ending frame `100%`. As well, starting and ending frames can be written as keywords `from` and `to`.

Now have a look at the following code. You can write like this as well:

@keyframes test-animation {from {width: 50px;}30% {width: 99px;}60.8% {width: 120px;}to {width: 150px;}}

Take into consideration that if the starting (`from`, `0%`) or ending (`to`, `100%`) frame is not given, the browser will set for them such estimated value for animated features as if the animation was not applied.

_Here and further on for more convenience I wrote few JavaScript lines as examples, that will in turns add or delete a class with animation on the element, so just click this element in order to play the animation. _

__Connecting the animation to the element__ is done by two commands:

element {animation-name: current-anim-name;animation-duration: 2s;}

Rule `animation-name` sets the name for created animation `@keyframes`. Rule `animation-duration` states for how many seconds the animation will play. It can be indicated in seconds `(3s, 65s, .4s)` or in milliseconds `(300ms, 1000ms)`.

You can group key frames:

@keyframes animation-name {0%, 35% {width: 100px;}100% {width:200px;}}

Few animations can be set for one element, their names and parameters should be written in an order they are set:

element {animation-name: animation-1, animation-2;animation-duration: 2s, 4s;}

## Animation delay

`animation-delay` feature identifies delay before playing the animation, it is set in seconds or milliseconds:

element {animation-name: animation-1;animation-duration: 2s;animation-delay: 5s; // Before starting this animation, 5 sec will pass.}

## Number of animation plays

As a value for feature `animation-iteration-count` we set any positive value from 0, 1, 2, 3… etc. or `infinite` for infinite repeat.

element {animation-name: animation-1;animation-duration: 2s;animation-delay: 5s;animation-iteration-count: 3; //this animation plays 3 times}

## BEFORE and AFTER state of animation

Feature `animation-fill-mode` identifies in which state the element would be before the animation starts and after its completion.

* `animation-fill-mode: forwards;` — after animation completion the element state would correspond to the last frame.

* `animation-fill-mode: backwards;` — after animation completion the element state would correspond to the first frame.

* `animation-fill-mode: both;` — before the animation start the element state would correspond to the first frame and after its completion to the last one.

In example below the same animation is appointed to three elements but each element has different value `animation-fill-mode`:

## Animation launch and pause

We do it either with the feature `animation-play-state`, which takes only 2 values: either `running`, or `paused`. Pretty simple :)

## Animation direction

With `animation-direction` feature we can manage the direction of animation play. Its parameters can take few values:

* `animation-direction: normal;` — animation plays forward, which is a usual direction for animation.

* `animation-direction: reverse;` — animation plays in reverse, from `to` to`from`.

* `animation-direction: alternate;` — even animation replays will go in reverse direction and odd — in normal.

* `animation-direction: alternate-reverse;` — even animation replays will go in normal direction and odd — in reverse.

## Function for allocating animated values by time

Rule `animation-timing-function` allows setting a special function which is responsible for animation replay speed. Please note that animation replay speed is mostly neutral, i.e. its immediate speed will be different in different areas. For now for this rule few already built-in arguments exist: `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`, `step-start`, `step-end.`

However, you can create such functions yourself. A special function `animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);` takes four arguments and, based on them, builds value distribution curve during the animation process. You can practice in creating your functions and have a look at their work here or here.

Finally, the animation can be turned into a set of discrete values with the help of function `steps (amount of steps, direction)`, where the role of its arguments is taken by the amount of its steps and direction, which can take values `start` or `end`. In the following example, the animation will consist of 7 steps, the latest of which will be done right before the animation completion:

element {animation-timing-function: steps(7, end);}

Value distribution curves of animation of values by time

## Browser support

CSS-animations have rather good support and it will be getting better. You can learn more details about animation support by desktop and mobile browsers from here.

## Materials for further read

* Animate.css — most famous library for CSS-animations.

* Effect.css — another well-known library for animations.

* CSS3 Animation Cheat Sheet — good set of examples.

*MDN CSS Animation — most modern animation guide.

* Play with Bounce.js. Cool and super-smooth effects.

That’s it! There are few more things that we did not cover, but you can find them in the materials listed above. And you have to know that right know you just learnt approximately 97,8% of CSS3-animation. Congrats!

Written by Pavel Pashkovsky

Want to learn more? Check out here