CSS3 Animation Tutorial (part 1)
Small CSS3 аnimation еutorial from DashBouquet developer. In the article you can find css3 animation examples with code. Learn how to create animation step by step.
Return to the home page

CSS3 Animation Tutorial (part 1)

:)You have successfully subscribed! Thank you for subscribing to our newsletter!! Email has already been taken
back to blog
Feb 06 2017 | byAnton Shaleynikov

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

Average: 0 / 5 (0 votes)