Code has been added to clipboard!

CSS Keyframes

Reading time 1 min
Published Aug 8, 2017
Updated Jan 21, 2020

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;}
}
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid certificates of completion
Coursera
Pros
  • Professional service
  • Flexible timetables
  • A variety of features to choose from
Main Features
  • Professional certificates of completion
  • University-level courses
  • Multiple Online degree programs
Datacamp
Pros
  • Great user experience
  • Offers quality content
  • Very transparent with their pricing
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable

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 and 100% 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 (from for the starting and to for 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

Browser image
Chrome
43+
Browser image
Edge
12+
Browser image
Firefox
16+
Browser image
IE
10+
Browser image
Opera
30+
Browser image
Safari
9+

Mobile browser support

Browser image
Chrome
43+
Browser image
Firefox
16+
Browser image
Opera
30+
Browser image
Safari
9+

Latest Udacity Coupon Found:

Verified STAFF PICK

75% OFF COURSES

Udacity Black Friday Offer

The best time to save on Udacity courses is now - follow this coupon to access a 75% Udacity Black Friday discount & enjoy learning at a very low cost!

Expiration date: 19/01/2021
3176 People Used
Only 97 Left
Rating
5.0