CSS3 Animation Transition Detailed

Transition consists of four attribute values:
To perform the properties of the transformation: transition-property ,
Time of transformation continuation: transition-duration ,
During the continuation period, the rate of change transition-timing-function
Transformation delay Time transition-delay .
Here's a look at the four attribute values, respectively.

First, Transition-property

Grammar:

Transition-property:none | All | [<IDENT>] [', ' <IDENT>]*

transition-propertyis used to specify that when one of the attributes of an element changes, the transition effect is performed, which has the following values: None (no property changes); All (change all properties) This is also its default value; Indent (element property name). When the value is none, transition stops execution immediately, and when specified as all, the element will perform a transition effect when any property value changes occur, ident is a property value that can be specified for the element. The corresponding types are as follows:

• 1, color: Through the red, green, blue and transparency components transform (each numerical processing) such as: Background-color,border-color,color,outline-color CSS properties;

• 2, Length: real numbers such as: Word-spacing,width,vertical-align,top,right,bottom,left,padding,outline-width,margin,min-width , min-height,max-width,max-height,line-height,height,border-width,border-spacing,background-position and other attributes;

• 3, percentage: real numbers such as: Word-spacing,width,vertical-align,top,right,bottom,left,min-width,min-height,max-width, Max-height,line-height,height,background-position and other attributes;

• 4, Integer discrete steps (the entire number), in the real digital space, and the use of floor () to convert to integers such as: Outline-offset,z-index properties;

• 5, Number True (floating point type) value, such as: Zoom,opacity,font-weight, and other properties;

• 6, Transform list: For more information, please refer to: "CSS3 Transform"

• 7, Rectangle: by x, y, Width and height (converted to numeric) transformation, such as: crop

• 8, Visibility: discrete step, within the range of 0 to 1 digits, 0 means "hidden", 1 means full "display", such as: visibility

• 9, Shadow: Action on color, x, Y and blur (fuzzy) attributes, such as: Text-shadow

• 10. Gradient: Change the position and color of each stop. They must have the same type (radial or linear) and the same stop value in order to perform animations, such as: Background-image

• 11. Paint Server (SVG): supports only the following scenarios: from gradient to gradient and from color to color, and then works like this

• 12. space-separated List of above: If the list has the same item value, each item in the list changes according to the above rules, otherwise there is no change

• 13, a shorthand property: If all parts of the abbreviation can be animated, it will change as if all the individual attributes change

Specifically what CSS properties can achieve transition effect, in the Web site list all can achieve transition effect of CSS property value and value of the type, you can click here to learn more. One thing to be reminded here is that not all attribute changes are triggered by the transition action effect, such as the adaptive width of the page, which does not trigger the transition effect when the browser changes width. However, the change in the property type shown in the table above will trigger a transition action effect.

Second, transition-duration

Grammar:

transition-durationis used to specify the duration of the element conversion process, with the value:<time> as a number, in S (s) or MS (MS), which can be used for all elements, including: Before and: after pseudo-elements. The default value is 0, which means that the transformation is instantaneous.

Third, transition-timing-function

Grammar:

Value:

transition-timing-functionThe value of the transition-timing-function allows you to change the conversion rate of the attribute value based on the advance of the time, with 6 possible values:

• 1. Ease: (gradually slows down) the default value, the Ease function is equivalent to the Bezier curve (0.25, 0.1, 0.25, 1.0).

• 2, Linear: (constant speed), the linear function is equivalent to the Bezier curve (0.0, 0.0, 1.0, 1.0).

• 3, Ease-in: (acceleration), the Ease-in function is equivalent to the Bezier curve (0.42, 0, 1.0, 1.0).

• 4, Ease-out: (deceleration), the Ease-out function is equivalent to the Bezier curve (0, 0, 0.58, 1.0).

• 5. Ease-in-out: (acceleration and deceleration), ease-in-out function equals Bezier curve (0.42, 0, 0.58, 1.0)

• 6, Cubic-bezier: (this value allows you to customize a time curve), a specific cubic-bezier curve. (x1, y1, x2, y2) four values are specific to point P1 and Point P2 on a curve. All values must be in the [0, 1] area, otherwise invalid.

Iv. Transition-delay

Grammar:

transition-delayis used to specify the time at which an animation starts executing, that is, how long it takes to start the transition effect after changing the attribute value of the element, whose value:<time> is the number, in S (sec), or MS (MS), Its use is extremely similar to transition-duration and can also be used for all elements, including: Before and: after pseudo-elements. The default size is "0", that is, the transform executes immediately without delay.

Sometimes we not only change the properties of a CSS effect, but want to change the transition effect of two or more CSS properties, then we just string together a few transition declarations, separated by commas (","), Then each can have their own different duration and the rate of their time transformation. But there is a point to note: Transition-delay and transition-duration values are time, so to distinguish their position in the ligatures, the General browser will be determined according to the order of precedence, the first can be resolved to the time of the 怭 value transition-duration , the second is transition-delay. Such as:

{    -moz-transition: background 0.5s ease-in,color 0.3s ease-out;     -webkit-transition: background 0.5s ease-in,color 0.3s ease-out;     -o-transition: background 0.5s ease-in,color 0.3s ease-out;     transition: background 0.5s ease-in,color 0.3s ease-out;  }

If you want to perform all the properties of the transition effect on the element, then we can also use the all property values to manipulate, at this time they share the same duration and rate transformation, such as:

{    -moz-transition: All 0.5s ease-in;     -webkit-transition: All 0.5s ease-in;     -o-transition: All 0.5s ease-in;     transition: All 0.5s ease-in;  }

To synthesize the above we can give transition a shorthand method: Transition: <property> <duration> <animation type> <delay> as shown:

A sample code that corresponds to:

{  -webkit-transition: All . 5s ease-in-out 1s;   -o-transition: All . 5s ease-in-out 1s;   -moz-transition: All . 5s ease-in-out 1s;   transition: All . 5s ease-in-out 1s;}

CSS3 Animation Transition Detailed