CSS3 transition characteristics for fade-out effects

Property Description:

transition-property: Defines CSS properties that apply transition effects, Transition-duration: Defines the time the transition effect executes, Transition--delay: Defines the wait time before the transition operation; Transition-timing-function: Specifies how intermediate values for the transition process are specified, where the term can be used when specifying intermediate values of the transition process or can be interpreted using the term three Bezier curve function terms: linear: Constant speed transition ease-in: accelerating ease-out : Deceleration ease-in-out: acceleration and deceleration ease: curve is similar to ease-in-out, but picture acceleration is faster than ease-in-out three times Bezier curve function Description: The function uses four points to describe the change of the Curve (0.0,0.0) (A, B) (C,d) ( 1.0,1.0) The term corresponds to the value of the function linear: (0.0,0.0) (0.0,0.0) (1.0,1.0) (1.0,1.0) ease-in: (0.0,0.0) (0.42,0.0) (1.0,1.0) (1.0,1.0) E Ase-out: (0.0,0.0) (0.0,0.0) (0.58,1.0) (1.0,1.0) Ease-in-out: (0.0,0.0) (0.42,0.0) (0.58,1.0) (1.0,1.0) The first way: in terms of input[ Type= "Email"],.login input[type= "password"]{transition-timing-function:linear;transition-property:background, Border transition-duration:0.3s;} The second way: Use the function/* because the coordinates of the first and fourth points in the three-time Bezier curve function are deterministic, so the coordinates of the 23rd point are defined in this function */

Div{transition-property:left;transition-timing-function:cubic-bezier (0.1,-0.6,0.2,0); tansiton-duration:1s;} div:hover{left:200px;} If you want all browsers to be compatible with CSS3 transitions, you should add a different prefix, but this will make the code look a lot, so you can write a neat style like this

/* Apply a transition to multiple attributes comma separated */.login input[type= "email"],.login input[type= "password"]{-webkt-transition:background 0.3s Linear,          border 0.3s linear;  -moz-transition:background 0.3s Linear,          border 0.3s linear;    -o-transition:background 0.3s Linear,          border 0.3s linear;       Transition:background 0.3s Linear,          border 0.3s linear;}

CSS3 transition characteristics for fade-out effects