CSS3 Transition

CSS3 transition property allow css properties to change over time. Transition can be used on css hover, focus, and active state. These properties change over a interval of time, thus looks interactive. Before css3 transition, transition effects were given using javascript, or jquery. But with the introduction of transitions in css3, its easier to use transitions.

Without Transition

With Transition




Transition Properties

Property Value
Transition-duration Duration of transition, in s or ms. Transition Duration
Transition-delay Delay to start transition, in s or ms. Transition Delay
Transition-property css property for transition. Default value is all. Transition Property
Transition-timing-function linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier. Transition Timing Function
Transition combination oe shortcut of all transition properties in one. Transition



Transition Duration

Transition Duration property set duration of transition in seconds(s) or milli-seconds(ms). For quick transition, we can set transtion duration to 0.2s or 200ms. But for longer duration, we can use 1s, 2s and so on.

Transition Duration Example




<style>
    .btn1{ transition-duration:500ms}
    .btn1:hover{ background:red}
    
    .btn2{ transition-duration:1s}
    .btn2:hover{ background:red}
</style>
        
    <Button class="btn1">Button 1</Button>
    <Button class="btn2">Button 2</Button>
        

Transition Delay

Transition Delay property starts transition with a delay in seconds(s) or milliseconds(ms).

Transition Delay Example




<style>
    .btn1{ transition-duration:500ms; transition-delay:500ms}
    .btn1:hover{ background:red}
    
    .btn2{ transition-duration:1s; transition-delay:1s}
    .btn2:hover{ background:red}
</style>
        
    <Button class="btn1">Button 1</Button>
    <Button class="btn2">Button 2</Button>
        

Transition Property

CSS3 Transition property tells which css should be transitioned . Default value of transition property is all.

List of CSS property to be Transitioned

  1. Background-color, background-position
  2. Border-color, border-width
  3. color
  4. bottom, top, left, right
  5. Font-size, Font-weight
  6. Width, Height
  7. Line Height
  8. Margin
  9. Padding
  10. Opacity
  11. Transform
  12. z-index

Transition Property Example




<style>
    .btn1{ transition-property:background; transition-duration:500ms}
    .btn1:hover{ background:red}
    
    .btn2{ transition-property:background; transition-duration:2s}
    .btn2:hover{ background:red}
</style>
        
    <Button class="btn1">Button 1</Button>
    <Button class="btn2">Button 2</Button>
        

Transition Timing Function

Transition Timing Function control the slope of transition Vs duration. Value of transition-timing-function are linear, ease, ease-in, ease-out, ease-in-out and cubic-bezier.

Transition Timing Function values

linear

linear

ease

ease

ease-in

ease in

ease-out

ease out

ease-in-out

ease in out

cubic-bezier

cubic bezier

Transition timing Function Example


<style>
.div1{ 
    background:aqua; 
    width:20%; 
    transition-duration:1s;
    transition-timing-function:linear;
}
.div1:hover{ width:100%}
<style>        

<div class="div1"></div>

Transition

Transition is the shortcut of all transition properties. Transition properties like transition duration, transition property, transition timing function and transition delay can be used in one single property.

Transition Examples


<style>
    .box1{
        transition: all 1s;
    }
    .box2{
        transition: color 1s;
    }
    .box3{
        transition: all 2s ease-in;
    }
    .box4{
        transition: all 2s 0.5s ease-in;
    }
        /* 2s is transition duration and 1s is transition  delay*/
<style>        

          

Multiple Transition Examples


<style>
    .box1{
        transition: color 1s, background 2s;
    }
    .box2{
        transition: opacity 1s linear, background 500ms ease-out;
    }
<style>        

          

Transition are supported in all major browsers. For Old IE, use jquery.