/*code*/
}
For movement to occur need to connect @keyframes with the element.
Example 1: Change the background color, use syntax from . to:
/* Code animation */
@keyframes example {
from {background-color: pink;}
to {background-color: purple;}
}
/* Áp dụng animation vào phần tử */
div {
width: 100px;
height: 100px;
background-color: purple;
animation-name: example;
animation-duration: 4s;
}
Example 2: Change the background color, use the syntax%:
/* Code animation */
@keyframes example {
0% {background-color: crimson;}
25% {background-color: lightsalmon;}
50% {background-color: pink;}
100% {background-color: indigo;}
}
/* Áp dụng animation vào phần tử */
div {
width: 100px;
height: 100px;
background-color: crimson;
animation-name: example;
animation-duration: 4s;
}
Full code:
Example 3: Change both the background color and the element's position
/* Code animation */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Áp dụng animation vào phần tử */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Full code:
Note: To create Animation effects, you must define at least two things:
The animation-delay attribute is used to determine the delay between the time a property changes and when the animation effect actually starts.
Example 1: Delay of 1 second before starting the effect.
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 1s;
}
Full code:
Animation-delay accepts negative values. If using negative values, the animation will start as the element played in N seconds.
Example 2: Animation will start as if it has been played for 2 seconds:
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
The animation-iteration-count attribute is used to set the number of times an animation is executed. The value is usually:
Example 1: Animation runs 3 times and stops
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
Example 2: Animation repeats continuously and infinitely
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
The animation-direction attribute is used to determine the direction of the animation. The values that animation-direction can receive are:
Example 1: Running animation in the opposite direction
div {
width: 100px;
height: 100px;
position: relative;
background-color: crimson;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
Example 2: Running animation with the value of the alternate
div {
width: 100px;
height: 100px;
position: relative;
background-color: crimson;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
Example 3: Running animation with alternate-reverse value
div {
width: 100px;
height: 100px;
position: relative;
background-color: crimson;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
Full code for your reference:
Animation-timing-function properties are used to determine the speed of change when the effect moves.
The values available are as follows:
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Run the following code yourself to see the difference:
CSS animations do not affect the element before running the first keyframe and after the last keyframe ends. And the animation-fill-mode attribute is used to change the state of the element before starting the animation.
The values available are as follows:
#div1 {-webkit-animation-fill-mode: none;}
#div2 {-webkit-animation-fill-mode: forwards;}
#div3 {-webkit-animation-fill-mode: backwards;}
#div4 {-webkit-animation-fill-mode: both;}
You try to demo yourself to see the difference, full code here:
We have a full declaration of 6 attributes as follows:
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
However, in some cases, the above declaration is unnecessary and lengthy. So CSS supports us with an attribute that can declare the entire value of the above attributes, which is the animation attribute .
The syntax is as follows (note the order of declaration):
animation: name | duration | timing-function | delay | iteration-count | direction | fill-mode
So the above example can be briefly declared in 1 line as follows:
div {
animation: example 5s linear 2s infinite alternate;
}
Last lesson: Transition transition effect in CSS
Next lesson: Tooltip effect in CSS