CSS3 transition

transition are presentational effect.the computed value of a property transition over time from the old value to the new value.

the animations that involve transitioning between two state are often called implicit transitions as the state in between the start and final states are implicitly defined by the browser.

css3 transition browser support.

propertybrowser support

internet explorer 10, firefox,  chrome,  opera,  safari support the transition property.

css3 transition syntax for all major browsers :-

           transition:  values ;   /*   w3c official syntax.  */ 
   -ms-transform:  values ;    /* internet explorer 9.0+ .  */ 
     -o-transition:  values ;    /* opera 10.5+    */ 
 -moz-transition:  values ;    /*firefox 3.6+    */ 
-webkit-transition:  values ;    /* chrome/safari 3.2+    */ 

how transitions work.

the css3 transitions module introduces a number of properties which together can be used to specify the css properties to be transitioned;the duration of the transition;the timing function of the transition;and an optional delay.

these properties are as follows:

  • transition-property  :the property to be transitioned.
  • transition-duration  :how long the transition should last.
  • transition-timing-functions:   how fast the transition happens over time(ease)
  • transition-delay  defines when the transition will start.


with transitions property,you must specify two things :--

  • specify the css property you want to add an effects to.
  • specify the duration of the effect.

the default value for this property is none, which means no property transitions.

if you specify a value of all, all animatable properties applied to the element transition.

syntax - transition-property:all | none | [ <ident> ]    [, <ident> ]*

mouse pointer hover effect please your mouse pointer hover this box

  <style   type="text/css">
 .transition_p {
            width:100px;  height:50px ;     padding-top:10px ;
         	background-color:gold  ; margin-left:auto  ;  margin-right:auto ;
         	transition:transform 2s,  height 122ms  ;
         	-o-transition:-o-transform 2s, height 122ms;
         	-moz-transition:-moz-transform 2s,  height 12ms-webkit-transition:-webkit-transform 2s, height 12ms ; }
              transform:rotate(120deg)  ;   -o-transform:rotate(120deg) ;
         	  -ms-transform:rotate(120deg)  ;   -moz-transform:rotate(120deg) ;
         	  -webkit-transform:rotate(12deg)  ;   height:120px ;

Css3 transition-timing-function

the Css3 transition-timing-function property is used to specify how the pace of the trasition changes over its duration.

the css3 transition-timing-function syntax :

             transition-timing-function:<timing-function> [, <timing-function> ]*
           <timing-function> = ease | linear | ease-in | ease-out | ease-in-out
           <timing-function> = cubic-bezier(<number>, <number>, <number>, <number>)

diagram: timing function control points

the example below demonstrates how each css transition-timing-function behaves:-


please your mouse pointer hover here

 <style   type="text/css">
   div.example {
                      width:640px; }
   div.example div{ width:200px;   background-color:#ed3786;
   color:white  ;  text-align:right;   margin:5px 0px  ;  padding:5px;
         			border-radius:5px  ;   -o-border-radius:5px;
         			-moz-border-radius:5px  ;   -ms-border-radius:5px;
         			-webkit-transition:width 2s;   -o-transition:width 2s;
        			-moz-transition:width 2s;   -ms-transition:width 2stransition:width 2s;  }
     -o-transition-timing-function:ease ;-ms-transition-timing-function:ease;
     -moz-transition-timing-function:ease ;-webkit-transition-timing-function:ease;         			
                    transition-timing-function:linear ;
  #easein{          transition-timing-function:ease-in;
  #easeout{         transition-timing-function:ease-out;
    -o-transition-timing-function:ease-out; -ms-transition-timing-function:ease-out;
  #easeinout{       transition-timing-function:ease-in-out;
  div.example:hover div{ width:500px; }
         </style>  </head>

transition-delay Property

the transition-delay property accepts a comma-separated list of times, specified in secons or milliseconds, which in this case determines the length of time between the transition being triggered and the transition starting.the default value is zero.

the css3 transition-delay syntax

         transition-delay: <time> [, <time> ]*

all Css transition properties

transitionshorthand property for setting all the transition properties in one declaration.css3
transition-propertyspecify which css property to animate between style sheets.css3
transition-durationsets how much time the transition takes to run.css3
transition-delayto pause before executing a transition.css3
transition-timing-functionallows you to control a transition's speed of progress.css3