CSS3 Animation Property

Here is the brief description of how to specify the animation code in CSS3 using the CSS3 @keyframes rule.


Property :

@keyframes animationname {keyframes-selector {css-styles;}}

animationname - Required. Defines the name of the animation.
keyframes-selector - Required. Percentage of the animation duration. Legal values: (0-100%, from (same as 0%), to (same as 100%))
css-styles - Required. One or more legal CSS style properties


animation-name: example;
animation-duration: 2s;


An animation lets an element gradually change from one style to another.You can change as many CSS properties you want, as many times you want. To use CSS3 animation, you must first specify some keyframes for the animation.Keyframes hold what styles the element will have at certain times.

The sub-properties of the animation property are:
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation-play-state

This does not configure the actual appearance of the animation, which is done using the @keyframes at-rule as described in Defining the animation sequence using keyframes below. Keyframes will control the intermediate animation steps in CSS3. You can have many keyframes-selectors in one animation.
Example :
.demodiv {
width: 100px;height: 100px;
background-color: indigo;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 2s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 2s;
@keyframes example {
from {background-color: indigo;}
to {background-color: yellow;}

/* Chrome, Safari, Opera */
@-webkit-keyframes example {
from {background-color: indigo;}
to {background-color: yellow;}
<div class='demodiv'></div>


In the above example animation will last for 2s.
Note: If the animation-duration property is not specified, the animation will have no effect, because the default value is 0.

Ask Questions

Ask Question