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.

Transition use on

1. :hover
2. :focus
3. :active

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.

<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 property starts transition with a delay in seconds(s) or milliseconds(ms).

<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>
        

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

<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 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

ease

ease-in

ease-out

ease-in-out

cubic-bezier

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

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

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.

<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>        

          

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