We will be using a basic example such as the animation of a battery charging.
The @keyframes property has the option to divide the animation time into parts/percentage and perform an activity that is specified for that part of the whole duration of the animation. the @keyframes property is given to each animation according to the name of that animation. It allows you to run the animation infinitely as well.
Here, is a simple CSS block that explains the usage of @keyframes:
Example: Usage of @keyframes in a background-color change.
Note: While using @keyframes, there are some guidelines that are set in place for you to create a smooth and working animation. Guidelines such as, make sure you make the transitions smooth and specify when the style change will happen in percent or with the keywords “from” and “to”, which is the same as 0% and 100%. 0% is when the animation is going to start, 100% is when the animation is completed. For the best browser support, i.e. to make sure the animation is supported in all browsers throughout the internet, be sure to always define both the 0% and the 100% selectors.
The animation for the charging of a battery is important, as it helps you to understand just how the @keyframes property will help you to time your animation in perfect intervals and hence help make the transitions smooth. The charging of the battery is used to explain how you can set various animations within the given time-period by specifying the percentage of division, exactly how in the example the battery charges from 0-25% then from 25-50% and so on.
- CSS | @keyframes Rule
- CSS | animation-delay Property
- CSS | animation-name Property
- CSS | animation-direction Property
- CSS | animation-play-state Property
- CSS | animation-fill-mode Property
- CSS | animation-iteration-count Property
- CSS | animation-timing-function Property
- CSS | animation-duration Property
- Animation using clip-path property in CSS
- How to create X and Y axis flip animation using HTML and CSS ?
- How to Create Loading Blur Text Animation Effect using HTML and CSS ?
- How to Create Gradient Background Animation using HTML and CSS ?
- Rubber Band Text animation using HTML and CSS
- How to Create Text Color Animation using HTML and CSS ?
- How to Create Ghost Text Animation on Hover using HTML and CSS?
- How to Create a Dot loading Animation using HTML and CSS?
- Cartoon animation loader using CSS
- CSS | Animation to Change the Hover State of a Button/Image
- How to make smooth bounce animation using CSS ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.