Transition Effect

CSS3 Animations

CSS3 animations allows animation of most HTML elements without using JavaScript or Flash!

Code
4Use


    

Transitions Effects

Transitions effect

    

Move Your Cursor On to this Box
    

Rainbow Colors
    

Hover over the div element above, to see the transition effect.
    

  
Ease
  
Ease
In
  
Ease
Out
  
Ease
In Out
  
Linear
  
Custom
  
Awesome!
  
 Hover on me


    

  

  

  

  

  

  

  

  

  

  
Hover on me

    

  
Normal
  
Example 1
  
Example 2
  
Example 3
  
Example 4
  
Example 5
  
Hover on me


    

A 3D image slider

Image 1 Image 2 Image 3 Image 4

    


      

          
      
      

        
      
      

        
      
      

        
      
    
  
  

    Image 1
    Image 2
    Image 3
    Image 4
  

    

  

  

  

    

      
1
    
    

      
2
    
    

      
3
    
    

      
4
    
    

      
5
    
    

      
6
    
  
  
  


  X rotation (0 deg)
  
  Y rotation (0 deg)
  
  Z rotation (0 deg)
  
  Perspective (800 px)
  


    

Code

The interesting bit of this code is this bit of CSS (remember to add vendor prefixes both for the keyframes code and the animation-* properties):

@keyframes resize {
  0% {
    padding: 0;
  }
  50% {
    padding: 0 20px;
    background-color:rgba(255,0,0,0.2);
  }
  100% {
    padding: 0 100px;
    background-color:rgba(255,0,0,0.9);
  }
}

#box {
  animation-name: resize;
  animation-duration: 1s;
  animation-iteration-count: 4;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}

Note:- That the 4 iterations makes the box pulse twice - the animation runs forwards then backwards, then forwards then backwards.

You can have as many keyframes as you like, at whatever intervals you like.

A useful setting is to set animation-iteration-count to infinite, making the animation continue for ever.

Demo

Hover to Pulsate

The key to using these animations is subtlety - nice delicate animations, rather than extreme over the top ones! It's also worth noting that the WCAG (Web Content Accessibility Guidelines) 2.0 specifies that a website shouldn't contain things that flash more than 3 times a second to avoid causing seizures in people susceptible to them.

     
    

    Hover to Pulsate