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.
Feb 06 2017 | by Anton 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

Latest news
Software Development
Dashbouquet Development Recognized by GoodFirms as the Best Company to Work With
In the era of immense market competition, innovations such as mobile apps and websites have become a core component of any successful business. From serving customers in real-time to delivering exceptional user experiences, both mobile applications, and websites have become a necessity to all businesses, irrespective of the size to increase the revenue, market share and profitability of the businesses. It all rounds up to choosing the best, and the top software development companies that can help businesses stand out from the competition.
Dashbouquet Development Recognized by GoodFirms as the Best Company to Work With
News
Dashbouquet Development Recognized as a Top Performer by Aciety in Multiple Categories
Dashbouquet Development is thrilled to announce its recent nominations and badges from Aciety
Dashbouquet Development Recognized as a Top Performer by Aciety in Multiple Categories
News
Dashbouquet Development Honored as a Clutch Champion for 2023
New award under our belt! Dashbouquet Development Honored as a Clutch Champion for 2023
Clutch Award 2023. Dashbouquet Development Honored as a Clutch Champion