CSS @keyframes

In CSS, an animation is created by changing the style. We can bound an animation with @keyframes to change the style multiple times in one animation cycle or iteration.

In other words, we can define @keyframes as, it is used to define the change in styles for multiple times in one cycle of selected animation. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #mydiv{width: 50px; height: 50px; border-radius: 50%; background-color: maroon; position: relative;
         animation-name: fresherearth; animation-duration: 2s; animation-iteration-count: infinite;}
      @keyframes fresherearth {
         from {top: 0px; left: 0px;}
         to {top: 0px; left: 220px;}
      }
   </style>
</head>
<body>
   
   <div id="mydiv"></div>
   
</body>
</html>

Output

Note - The animation-name is used to define a name for an animation.

Note - The animation-duration is used to define time to complete one iteration or cycle of an animation.

Note - The animation-iteration-count is used to define the total number of iterations or cycles for an animation to play.

The from and to Selector of @keyframes

The from selector is used to style for the beginning of an animation. Whereas the to selector is used to style for the end of an animation.

The percentage (%) Selector of @keyframes

The 0% selector is used to style for the beginning of an animation. Therefore the 0% selector is equal to the from selector. Whereas the 100% selector used to style for the end of an animation. Therefore the 100% selector is equal to the to selector.

Tip - Use percentage to change the style for required number of times, in one animation cycle. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #mydiv{width: 50px; height: 50px; border-radius: 50%; background-color: maroon; position: relative;
         animation-name: fresherearth; animation-duration: 2.5s; animation-iteration-count: infinite;}
      @keyframes fresherearth {
         0% {top: 0px; left: 0px;}
         10% {top: 220px; left: 220px;}
         20% {top: 220px; left: 0px;}
         30% {top: 0px; left: 220px;}
         40% {top: 0px; left: 0px;}
         50% {top: 220px; left: 0px;}
         60% {top: 0px; left: 220px;}
         70% {top: 220px; left: 220px;}
         80% {top: 0px; left: 0px;}
         90% {top: 220px; left: 220px;}
         100% {top: 0px; left: 0px;}
      }
   </style>
</head>
<body>
   
   <div id="mydiv"></div>
   
</body>
</html>

Output

CSS @keyframes Syntax

The syntax of @keyframes in CSS, is:

@keyframes animationName {
   from {css-declaration;}
   to {css-declaration;}
}

@keyframes animationName {
   percentageOne {css-declaration;}
   percentageTwo {css-declaration;}
   percentageThree {css-declaration;}
   .
   .
   .
   percentageN {css-declaration;}

Note - To ignore particular style declaration, use !important right after the declaration. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #a{width: 50px; height: 50px; border-radius: 50%; background-color: maroon; position: relative;
         animation-name: fresherearth; animation-duration: 2.5s; animation-iteration-count: infinite;}
      @keyframes fresherearth {
         0% {top: 0px; left: 0px; background-color: blue;}
         50% {top: 220px; left: 220px; background-color: black !important}
         100% {top: 0px; left: 220px; background-color: chocolate;}
      }
   </style>
</head>
<body>
   
   <div id="a"></div>
   
</body>
</html>

Output

After the style background-color: black, I've added !important, therefore this style is ignored.

Note - Since from selector is equal to 0% selector, whereas to is equal to 100% selector, therefore while using percentage selectors, we can use from and/or to in place of 0% and/or 100% selector. For example:

HTML with CSS Code

<!DOCTYPE html>
<html>
<head>
   <style>
      #myd{width: 50px; height: 50px; border-radius: 50%; background-color: maroon; position: relative;
         animation-name: myanim; animation-duration: 2.5s; animation-iteration-count: infinite;}
      @keyframes myanim {
         from {top: 0px; left: 0px; background-color: blue;}
         50% {top: 220px; left: 220px; background-color: black;}
         to {top: 0px; left: 220px; background-color: chocolate;}
      }
   </style>
</head>
<body>
   
   <div id="myd"></div>
   
</body>
</html>

Output

CSS Online Test

« Previous Tutorial Next Tutorial »