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!
