blog

:)You have successfully subscribed! Thank you for subscribing to our newsletter!! Email has already been taken

back to blog

Feb 06 2017 | byAnton Shaleynikov

CSS3 Animation Tutorial (part 1)

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. _

See the Pen Simple animation by Dash Bouquet (@dashbouquetdevelopment) on CodePen.

__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
    }

That would be enough information for now, as you learnt the basics of CSS3-animation. In our next article we will cover more complicated animation features, so stay updated!


Written by DashBouquet Saga orchestrator Pavel Pashkovsky