An example analysis of transition attribute in CSS3

I. Description

1.1 Definitions and usage

The Transition property is a shorthand property for setting four transition properties:

Transition-property: Specifies the name of the CSS property that sets the transition effect.

Transition-duration: Specifies how many seconds or milliseconds to complete the transition effect.

Transition-timing-function: Speed curve that specifies the speed effect.

Transition-delay: Defines when the transition effect starts.

1.2 Syntax

Transition:property duration timing-function delay;

1.3 transition-timing-function

1.3.1 Syntax

Transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier (N,n,n,n);

1.3.2 Description

Linear: Specifies the transition effect (equal to Cubic-bezier (0,0,1,1)) that starts at the same speed to the end. Ease: A transition effect (Cubic-bezier (0.25,0.1,0.25,1)) that specifies a slow start and then a slow end. Ease-in: Specifies a transition effect (equal to Cubic-bezier (0.42,0,1,1)) that starts at a slow speed. Ease-out: Specifies a transition effect (equal to Cubic-bezier (0,0,0.58,1)) that ends at a slow speed. Ease-in-out: Specifies a transition effect (equal to Cubic-bezier (0.42,0,0.58,1)) that starts and ends at a slow speed. Cubic-bezier (N,n,n,n): Defines its own value in the Cubic-bezier function. The possible values are numbers between 0 and 1.

Ii. examples

<style>. transition-example{width:500px;        height:370px;        Background: #ccc;    padding:10px 0;        }. transition-example:hover>p{margin-left:90%;        Transform:rotate (360DEG);    border-radius:5px;        }. transition-example>p{width:50px;        height:50px;        Text-align:center;        margin:10px 0;        Background-color:blue;    Color: #fff;    }. linear{Transition:all 5s linear;    }. ease{Transition:all 5s ease;    }. ease-in{Transition:all 5s ease-in;    }. ease-out{Transition:all 5s Ease-out;    }. ease-in-out{Transition:all 5s Ease-in-out;    }. cubic-bezier{Transition:all 5s Cubic-bezier (0.42,0,0.58,1); } </style><p class= "Transition-example" > <p class= "linear" >linear</p> <p class= "Ease" & gt;ease</p> <p class= "ease-in" >ease-in</p> <p class= "Ease-out" >ease-out</p> <p class= "ease-in-out" >ease-in-out</p> <p class= "Cubic-bezier" >cubic-bezier</p& Gt;</p>

lineareaseease-inease-outease-in-outcubic-bezier