CSS3 Transition Properties

Transition is a newly added feature in CSS3, as described in the standard: "CSS transition allows CSS property values to transition from one state to another in a certain amount of time." This state can be triggered by clicking on the mouse, getting focus, being clicked, or any change to the element, and smoothing the CSS's property values with an animated effect. ”

First, transition syntax:

Transition: [<transition-property>| | <transition-duration>| | <transition-timing-function>| | <transition-delay>| | <transition-property>| | <transition-duration>| | <transition-timing-function>| | <transition-delay>]

The transition consists of four attribute values: The Transition-property of the properties of the transformation, the time transition-duration of the Transformation, and the duration of the continuation period. The rate change of the transformation transition-timing-function, the transformation delay time transition-delay.

1. Changing properties: Transition-property

none | All | [<ident>] [', ' <ident>]*;

Transition-property is used to specify that when one of the attributes of an element is changed, the transition effect is performed, where none has no property change; All properties are changed, it is also the default, and the corresponding type of the indent element attribute is as follows:

2, Animation time: Transition-duration

<time> [, time]*;

Transition-duration is the time of the animation execution, in S (s), such as 0.1 seconds can be written as "0.1s" or ". 1s", which can act on any element, including: Before and: after pseudo-elements.

3, the way of animation execution: Transition-timing-function

Ease | Linear | ease-in | Ease-out | Ease-in-out;

Ease: Gradually slow down, linear: constant speed, ease-in: From slow to fast, ease-out: from fast to slow, ease-in-out: Slow first to fast to slow.

4, animation delay: Transition-delay

<time> [, time]*;

Transition-delay is used to specify the time at which an animation starts executing, that is, how long it takes to start the transition animation effect after changing the attribute value of the element, and the value is the same as transition-duration.

Second, instance animation

Step1: Changing font Color

H1 A{color: #03c; text-decoration:none;-webkit-transition:color. 5s Ease-in-out;-moz-transition:color. 5s Ease-in-out ;-o-transition:color. 5s Ease-in-out;transition:color. 5s Ease-in-out;} H1 A:hover{color: #f60;}
Step2: Changing the background color
H2:hover{-webkit-transition:background-color 0.5s Linear;-moz-transition:background-color 0.5s linear;-o- Transition:background-color 0.5s linear;transition:background-color 0.5s linear;background-color: #ccc;}
Step3: Converting multiple properties
function transition for multiple attribute conversions:
<div class= "div" > Hard to be encountered once, sword lonely around the star. The mountains and rivers broken wind drifting, the life of rain playing ping. Fear beachhead said fear, 0 Ding Yang sigh 0 ding. Who has not died in life since ancient times? Stay Loyalty </div>
. div {padding:5px;color: #fff; Background-color: #666;-webkit-transition:color 1s ease-in-out, background-color 0.5s Ease-in-out;-moz-transition:color 1s ease-in-out, background-color 0.5s ease-in-out;-o-transition:color 1s Ease-in-out, background-color 0.5s ease-in-out;transition:color 1s ease-in-out, background-color 0.5s ease-in-out;}. div:hover {color: #333; Background-color: #ccc;}
There is another way to get the gradient effect:
. div {-webkit-transition:all 1s ease-in-out;-moz-transition:all 1s ease-in-out;-o-transition:all 1s ease-in-out; Transition:all 1s ease-in-out;}
The first one writes all the attributes, and the second uses all instead, which is the transformation of all attributes.
The first three demo:http://rainleaves.com/demo/transition/transition.html are transition animated instances, and the last four are transform instances.
Reprint Please indicate this article link:Http://www.rainleaves.com/html/1534.html
CSS3 Transition Properties