LAST UPDATED: APRIL 21, 2021
CSS Animation
What is a CSS Animation?
The CSS Animation allows us to do some unbelievable things with the HTML elements that make our web page more stylish and elegant. It allows the HTML elements to change their shape and also adds movement to them without using javascript or flash. To animate the HTML element using CSS animation property, we have to first specify the two building blocks, that are:
Keyframes - The keyframes specify the style of the element at a particular stage.Animation properties - The animation properties are assigned to the @keyframes in order to make the animated element to function.
The @keyframes Rule
The CSS @keyframes rule is used to control the intermediate steps in a CSS animation sequence by specifying the CSS animation properties for the keyframes along with the animation sequence. This process provides more control over the intermediate steps of the animation sequence than transitions.
What CSS animation does?
The animation makes an element gradually change from one style to the new style at certain times by specifying CSS animation properties inside the @keyframes rule. To make an animation to work, we have to bind the animation to an element.
CSS Animation Properties
| S.No. |
Property |
Explanation |
| 1. |
@keyframes |
The @keyframes are used to specify the animation. |
| 2. |
animation |
The animation is a shorthand property that is used to set all the properties for an element. |
| 3. |
animation-direction |
The animation-direction property defines when the animation will start. |
| 4. |
animation-duration |
The animation-duration specifies how much time animation will take to complete one cycle. |
| 5. |
animation-fill-mode |
The animation-fill-mode specifies the static style of the element. |
| 6. |
animation-iteration-count |
The animation-iteration-count specifies how many times the animation will be played. |
| 7. |
animation-play-state |
The animation-play-state specifies whether the animation is running or paused. |
| 8. |
animation-delay |
The animation-delay specifies when will the animation start. |
| 9. |
animation-name |
The animation-name specifies the name of the @keyframes animation. |
| 10. |
animation-timing-function |
The animation-timing-function specifies the speed curve of the animation. |
Example: Applying animation in CSS
In the given example, we have used all the major CSS animation properties to animate the box.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: #69e5f5;
position: relative;
animation: myfirst 5s linear 2s infinite alternate;
}
@keyframes myfirst {
0% {background-color: #72e8f7; left:0px; top:0px;}
25% {background-color: #409df5; left:200px; top:0px;}
50% {background-color: #406ef7; left:200px; top:200px;}
75% {background-color: #5a45f7; left:0px; top:200px;}
100% {background-color: #7a32ed; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Output:
Live Example: Applying animation-timing-property in CSS
In the given example, we have specified the speed curve of the element using CSS animation-timing-property. The animation-timing-property consists of several values, these values are:
ease - This is a default value. It specifies the animation with a slow start, then fast, and then ends slowly.linear - It specifies the animation with the same speed from start to end.ease-in - It specifies the animation with a slow start.ease-out - It specifies the animation with the slow end.ease-in-out - It specifies the element with a slow start and end.
In the given live example, we have used all the values of the animation-timing-property that are mentioned above:
Conclusion
In this lesson, we have learned CSS animation which allows the elements to change from one style to another new style at certain times. We have also learned some most used animation properties which are given below:
- ease
- linear
- ease-in
- ease-out
- ease-in-out
