Using Transitions

The CSS transition controls the rate at which new property values are applied.

The following table lists the transition related properties:

PropertyDescription
transition-delaySpecifies a delay. It is a CSS time value.
transition-durationSpecifies the length. It is a CSS time value.
transition-propertySpecifies the target property.
transition-timing-functionSpecifies how to calculated the intermediate value during the transition.
transitionShorthand to specify all in one declaration.

A CSS times is a number followed by either ms to denote milliseconds or s to denote seconds. The format for the transition shorthand property is as follows:

 
transition: <transition-property> <transition-duration> <transition-timing-function> <transition-delay>
  

-webkit- means we use it with Safari and Chrome.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            p { 
                padding: 5px; 
                border: medium double black; 
                background-color: lightgray; 
                font-family: sans-serif; 
            } 
            #myID { 
                font-size: large; 
                border: medium solid black; 
            } 
            #myID:hover { 
                font-size: x-large; 
                border: medium solid white; 
                background-color: green; 
                color: white; 
                padding: 4px; 
                -webkit-transition-delay: 100ms; 
                -webkit-transition-property: background-color, color, padding, font-size, border; 
                -webkit-transition-duration: 500ms; 
            } 
        </style> 
    </head> 
    <body> 
        <p> 
            <span id="myID">HTML</span> 
            This is a test.
        </p> 
    </body> 
</html>
  
Click to view the demo

Creating Inverse Transitions

The following shows how you can smooth the return to the original style.

 
<!DOCTYPE HTML> 
<html> 
    <head> 
        <title>Example</title> 
        <style> 
            p { 
                padding: 5px; 
                border: medium double black; 
                background-color: lightgray; 
                font-family: sans-serif; 
            } 
            #myID { 
                font-size: large; 
                border: medium solid black; 
                -webkit-transition-delay: 10ms; 
                -webkit-transition-duration: 250ms; 
            } 
            #myID:hover { 
                font-size: x-large; 
                border: medium solid white; 
                background-color: green; 
                color: white; 
                padding: 4px; 
                -webkit-transition-delay: 100ms; 
                -webkit-transition-property: background-color, color, padding, font-size, border; 
                -webkit-transition-duration: 500ms; 
            } 
        </style> 
    </head> 
    <body> 
        <p> 
            <span id="myID">HTML</span>
            This is a test.
        </p> 
    </body> 
</html>
  
Click to view the demo
Home 
  HTML CSS Book 
    CSS  

Transitions:
  1. Using Transitions
  2. Selecting How Intermediate Values Are Calculated
Related: