CSS3 animations

css3 animations make it possible to animate transition from one css style configuration to another.animations consist of two components, a style describing the css animation and a set of keyframes that indicate the start and end states of the animation's style.


browser supports

propertybrowser support
animation
@keyframes

internet explorer 10, firefox,  chrome,  opera,  safari support the animation property and the @keyframes rule.

chrome and safari require the perfix -webkit-.

mozilla firefox requires the perfix -moz-.

opera require the perfix -o-.


@keyframes rules

@keyframes are used to specify the values for the animating properties at various points during the animation.

the css style sheet properties defines inside the @keyframes rule and the animation will change from the current style to the new style.

css keyframes rules example

     <style   type="text/css" >
     
 @keyframes selector_for_key_frames{
 
         from { background-color:#ef3434opacity:0.3;}
         
         to { background-color:greenopacity:1.0;}         
      }   
 @-o-keyframes selector_for_key_frames{
 
         from { background-color:#ef3434opacity:0.3;}
       
         to { background-color:greenopacity:1.0;}
       }
       
 @-moz-keyframes selector_for_key_frames{
 
        from { background-color:#ef3434opacity:0.3;}
        
        to { background-color:greenopacity:1.0;}
        
      }
      
 @-webkit-keyframes selector_for_key_frames{
 
        from { background-color:#ef3434opacity:0.3;}
        
        to { background-color:greenopacity:1.0;}
   }
     </style>

note :-empty @keyframes rule are valid, they may hide the keyframes of those preceding animation definition with a matching name.


css3 animation

an animation is used to change an element style from current look to another better look style.

in @keyframes animation change 'from' and 'to is same as 0% to 100%.

0% is the beginning state of the animation and 100% ending position of the animation.

example:-change the element styles when the animation 0%, 20%, 60%, 100%.

       <style  type="text/css">
       
 @keyframes sandeep{
 
   		      0% { opacity:1.0;   filter:alpha(100);   background-color:pink; }
   		      
       		  20% { opacity:0.9;   filter:alpha(90);   background-color:yellow; }
       		  
       		  60% { opacity:0.8;   filter:alpha(80);   background-color:green; }
       		  
       		  100% { opacity:0.8;   filter:alpha(80);   background-color:#ed3678; }       		  
        }
 @-o-keyframes sandeep{
 
 		      0% { opacity:1.0;   filter:alpha(100);   background-color:pink; }
 		      
       		  20% { opacity:0.9;   filter:alpha(90);   background-color:yellow; }
       		  
       		  60% { opacity:0.8;   filter:alpha(80);   background-color:green; }
       		  
       		  100% { opacity:0.8;   filter:alpha(80);   background-color:#ed3678; }       		  
       }
       
 @-moz-keyframes sandeep{
 
              0% { opacity:1.0;   filter:alpha(100);   background-color:pink; }
              
       		  20% { opacity:0.9;   filter:alpha(90);   background-color:yellow; }
       		  
       		  60% { opacity:0.8;   filter:alpha(80);   background-color:green; }
       		  
       		  100% { opacity:0.8;   filter:alpha(80);   background-color:#ed3678; }     		  
       }
       
 @-ms-keyframes sandeep{
 
 		      0% { opacity:1.0;   filter:alpha(100);   background-color:pink; }
 		      
       		  20% { opacity:0.9;   filter:alpha(90);   background-color:yellow; }
       		  
       		  60% { opacity:0.8;   filter:alpha(80);   background-color:green; }
       		  
       		  100% { opacity:0.8;   filter:alpha(80);   background-color:#ed3678; }       		  
       }
       
 @-webkit-keyframes sandeep{
 
 		      0% { opacity:1.0;   filter:alpha(100);   background-color:pink; }
 		      
       		  20% { opacity:0.9;   filter:alpha(90);   background-color:yellow; }
       		  
       		  60% { opacity:0.8;   filter:alpha(80);   background-color:green; }
       		  
       		  100% { opacity:0.8;   filter:alpha(80);   background-color:#ed3678; }      		  
       }
       
 div {
 
    	      width:200px;  height:200px;
    	      
       		  animation:sandeep 4s;
       		  
       		  -o-animation:sandeep 4s;
       		  
       		  -moz-animation:sandeep 4s;
       		  
       		  -ms-animation:sandeep 4s;
       		  
       		  -webkit-animation:sandeep 4s;      		  
       }
       </style>

note :-when the animation is define inside the @keyframes,it must bind to a selector otherwise the animation will have no effect.


example :-how sets all the animation properties to a selector.

      <style  type="text/css">
 div {
 
            animation-name:sandeep;
           
       	 	animation-duration:4s;
       	 	
       		animation-delay:3s;
       		
       		animation-direction:alternate;
       		
       		animation-play-state:running;
       		
       		animation-iteration-count:infinite;
       		
       		animation-timing-function:easer-in;
       		
       		-o-animation-name:sandeep;
       		
       		-o-animation-duration:4s;
       		
       		-o-animation-delay:3s;
       		
       		-o-animation-direction:alternate;
       		
       		-o-animation-play-state:running;
       		
       		-o-animation-iteration-count:infinite;
       		
       		-o-animation-timing-function:easer-in;
       		
       		-ms-animation-name:sandeep;
       		
       		-ms-animation-duration:4s;
       		
       		-ms-animation-delay:3s;
       		
       		-ms-animation-direction:alternate;
       		
       		-ms-animation-play-state:running;
       		
       		-ms-animation-iteration-count:infinite;
       		
       		-ms-animation-timing-function:easer-in;
       		
       		-moz-animation-name:sandeep;
       		
       		-moz-animation-duration:4s;
       		
       		-moz-animation-delay:3s;
       		
       		-moz-animation-direction:alternate;
       		
       		-moz-animation-play-state:running;
       		
       		-moz-animation-iteration-count:infinite;
       		
       		-moz-animation-timing-function:easer-in;
       		
       		-webkit-animation-name:sandeep;
       		
       		-webkit-animation-duration:4s;
       		
       		-webkit-animation-delay:3s;
       		
       		-webkit-animation-direction:alternate;
       		
       		-webkit-animation-play-state:running;
       		
       		-webkit-animation-iteration-count:infinite;
       		
       		-webkit-animation-timing-function:easer-in;       		
   }
    </style>

animation shorthand property

the animation shorthand property is used to defines all the animation properties in one declaration statement.

     <style type="text/css">
        
  div {
            animation:sandeep 4s ease-in 2s infinite alternate;
            
            -o-animation:sandeep 4s ease-in 2s infinite alternate;
            
            -moz-animation:sandeep 4s ease-in 2s infinite alternate;
            
            -ms-animation:sandeep 4s ease-in 2s infinite alternate;
            
            -webkit-animation:sandeep 4s ease-in 2s infinite alternate;
} </style>

all Css animation properties

propertydescriptioncss
@keyframesspecifies the animationcss3
animationshorthand property to define the all animation properties in one declarationcss3
animation-nameindicate the name of the @keyframes animation.css3
animation-durationdefines the length of time that an animation takes to complete one cycle.css3
animation-delaydefines when the animation will start.css3
animation-timing-functiondescribes how the animation will progress over one cycle of its duration.css3
animation-iteration-countspecifies the number of times an animation cycle is played.css3
animation-directiondefines whether or not the animation should play in reverse on some or all cycles.css3
animation-play-statedefines whether the animation is running or paused.css3