HTML 
CSS 
PHP 
JavaScript 
SQL 
Bootstrap 
Solidity 
jQuery 
Git 
Chrome DevTools 
C++ 
Python What are CSS keyframes?
During a CSS animation, the styling of an element can change multiple times. Thus, whenever you're creating an animation, you need to define certain points called CSS keyframes at which the element will change styling.
To specify the code of the animation, you need to use the CSS @keyframes rule:
Example
@keyframes animate {
0% {top: 0px; left: 0px; background: blue;}
25% {top: 0px; left: 100px; background: green;}
50% {top: 100px; left: 100px; background: red;}
75% {top: 100px; left: 0px; background: black;}
100% {top: 0px; left: 0px; background: grey;}
}
Pros Main Features
- Easy to use with a learn-by-doing approach
- Offers quality content
- Gamified in-browser coding experience
- The price matches the quality
- Suitable for learners ranging from beginner to advanced
- Free certificates of completion
- Focused on data science skills
- Flexible learning timetable
Pros Main Features
- Simplistic design (no unnecessary information)
- High-quality courses (even the free ones)
- Variety of features
- Nanodegree programs
- Suitable for enterprises
- Paid Certificates of completion
Pros Main Features
- A wide range of learning programs
- University-level courses
- Easy to navigate
- Verified certificates
- Free learning track available
- University-level courses
- Suitable for enterprises
- Verified certificates of completion
The syntax for keyframes in CSS
The syntax requirements for using the CSS @keyframes rule are as follows:
@keyframes animationname {keyframe {css-styles;}}
| Value | Description |
|---|---|
| animationname | The name of an animation |
| keyframe | The point of the animation duration at which the specified change occurs |
| css-styles | CSS style properties |
Animations are normally gradual transitions from one set of CSS styles to another. You can specify CSS keyframes in two ways:
- using percentages (
0%for the starting and100%for the ending point of the animation):
Example
/* Opera, Chrome, Safari */
@-webkit-keyframes animate {
0% {top: 0px; background: green; width: 100px;}
100% {top: 200px; background: black; width: 300px;}
}
/* Standard syntax */
@keyframes animate {
0% {top: 0px; background: green; width: 100px;}
100% {top: 200px; background: black; width: 300px;}
}- using keywords (
fromfor the starting andtofor the ending point of the animation):
Example
/* Opera, Chrome, Safari */
@-webkit-keyframes animate {
from {bottom: -100px;}
to {bottom: 500px;}
}
/* Standard syntax */
@keyframes animate {
from {bottom: -100px;}
to {bottom: 500px;}
}To ensure optimal browser support for your CSS keyframes, you should define both 0% and 100% selectors:
Example
/* Chrome, Safari, Opera */
@-webkit-keyframes animate {Â Â Â
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px;}
100% {top: 100px;}
}
/* Standard syntax */
@keyframes myturn {
0% {top: 0px;}
25% {top: 200px;}
75% {top: 50px;}
100% {top: 100px;}
}
Browser support
Chrome
43+
Edge
12+
Firefox
16+
IE
10+
Opera
30+
Safari
9+
Mobile browser support
Chrome
43+
Firefox
16+
Opera
30+
Safari
9+
