Transition Effect



CSS3 Animations

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

Code
4Use


Code
4Use

Transitions Effects

Different timing functions

Ease

Ease
In

Ease
Out

Ease
In Out

Linear

Custom

Awesome!

Hover on me



  
Ease

  
Ease
In

  
Ease
Out

  
Ease
In Out

  
Linear

  
Custom

  
Awesome!

  
 Hover on me

Transition delays

Hover on me


  

  

  

  

  

  

  

  

  

  
Hover on me

Advanced delays

Normal

Example 1

Example 2

Example 3

Example 4

Example 5

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

JavaScript

A cube made with 3D CSS transforms

1

2

3

4

5

6

Have a play with the controls - there's no transition here, just the sliders to control it. Note that I'm only using javascript to update the css values - all the maths needed is done by the browser automatically.










  

  

  

    

      
1

    

    

      
2

    

    

      
3

    

    

      
4

    

    

      
5

    

    

      
6

JavaScript

Hover over me

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


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.