🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

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;}
}

DataCamp
Pros
  • 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
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
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
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free 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 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+