Selecting How Intermediate Values Are Calculated

You use the transition-timing-function property to specify the way that intermediate values are determined. There are five preset values to choose from:

  • ease (the default value)
  • linear
  • ease-in
  • ease-out
  • ease-in-out
            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; 
                -webkit-transition-timing-function: linear; 
            This is a test.
            <span id="myID">CSS</span>
Click to view the demo
  HTML CSS Book 

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