The transition of CSS

Transition Transition Parameters:
Trasition-property: Retrieves or sets the properties of the participating transitions in the object (All,none, which specifies the CSS properties to be staged)
Transition-duration: Setting the duration of the object transition
Transition-timing-function: Retrieves or sets the animation type of transitions in an object:
(Linear: linear transition. Equivalent to Bezier curve (0.0, 0.0, 1.0, 1.0)
Ease: smooth transitions. Equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0)
Ease-in: from slow to fast. Equivalent to Bezier curve (0.42, 0, 1.0, 1.0)
Ease-out: From fast to slow. Equivalent to Bezier curve (0, 0, 0.58, 1.0)
Ease-in-out: From slow to fast to slow. Equivalent to Bezier curve (0.42, 0, 0.58, 1.0)
Cubic-bezier (<NUMBER>, <number>, <number>, <number>): Specific Bezier type, 4 values in [0, 1] range)
Transition-delay: Retrieving or setting the time for object delay transitions

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
 The mouse over the rectangle to view the over effect: 
 

 
 

  
  
 
   
Linear: Linear transition
 
   
Ease: Smooth transitions
 
   
Ease-in: from slow to fast
 
   
Ease-out: from fast to slow
 
   
Ease-in-out: From slow to fast to slow
 
  
 
 
The transition of CSS