CSS3 Transition Attribute Usage

CSS3 's transition This is the sample description: "CSS transition allow CSS property values to transition smoothly within a certain time interval." This effect can be triggered by clicking on the mouse, getting focus, being clicked, or any change to the element, and smoothing out the CSS property values with a smooth animation effect. ”

Below we also start from its most grammatical and attribute values to learn the specific use of transition

Grammar:
Transition: [< ' transition-property ' > | | < ' transition-duration ' > | | < ' transition-timing-function ' > || < ' Transition-delay ' > [, [< ' Transition-property ' > | | < ' transition-duration ' > | | < ' Transition-timing-function ' > | | < ' Transition-delay ' >]]*

Transition consists primarily of four property values: The properties that perform the transformation: Transition-property, the time that the transformation lasts: transition-duration, in the continuation period, The rate variation of the transformation is transition-timing-function, and the transformation delay time is transition-delay. Let's look at the four property values, respectively.

First, Transition-property:

Grammar:

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

Transition-property is used to specify that a transition effect is performed when one of the elements of an element changes, with the following values: None (no property change); All (changes to all properties) This is also its default value; Indent (element property name). When the value is none, transition immediately stops execution, and when all is specified, the element will perform a transition effect when any property value changes occur, ident can specify one of the element's property values. Its corresponding type is as follows:

1, color: Through the red, green, blue and transparent component transformation (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, the integer discrete steps (the entire number), in the real digital space, as well as the use of floor () converted to integers, such as: Outline-offset,z-index properties;

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

6, Transform list: Details please refer to: "CSS3 Transform"

7, Rectangle: Through the x, Y, Width and height (converted to numerical) transformation, such as: crop

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

9, Shadow: function in color, x, Y and blur (fuzzy) attributes, such as: Text-shadow

10, gradient: Through each stop when the position and color change. They must have the same type (radial or linear) and the same stop number to perform the animation, such as: Background-image

11, Paint Server (SVG): only support the following: from gradient to gradient and color to color, and then work similar to the above

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

13. A shorthand property: If all parts of the abbreviation can be animated, it will change as all individual properties change

Concrete what CSS properties can achieve transition effect, in the official website of the net, all can realize the transition effect of CSS attribute value and the type of value, you can click here to understand the details. One caveat here is that not all attribute changes are triggered transition action effects, such as the adaptive width of the page, when the browser changes width, does not trigger the transition effect. However, the property type changes shown in the above table will trigger a transition action effect.

Second, Transition-duration:

Grammar:

Transition-duration: [,]*

Transition-duration is used to specify the duration of the element conversion process, measured in values, in s (seconds), or MS (milliseconds), and can be used for all elements, including: Before and: after pseudo elements. The default value is 0, which means that the transform is instantaneous.

Third, Transition-timing-function:

Grammar:

Transition-timing-function:ease | Linear | ease-in | Ease-out | Ease-in-out | Cubic-bezier (,,,) [, ease | linear | ease-in | ease-out | ease-in-out | Cubic-bezier (,,,)]*

Take value:

The value of transition-timing-function allows you to change the conversion rate of the attribute value according to the advance of time, Transition-timing-function has 6 possible values:

1, Ease: (gradually slow) default value, Ease function is equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0).

2, Linear: (uniform), 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), the Ease-in-out function is equivalent to the 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 the point P1 and Point P2 on the curve. All values need to be in the [0, 1] area, otherwise it is not valid.

It is cubic-bezier to calculate the attribute value in the process of "conversion" through the Bezier curve, as shown in the following curve, by changing the coordinates of the P1 (x1, y1) and P2 (X2 and y2), the output percentage of the whole process can be changed. The initial default value is defaults.

Cubic-bezier

Schematic diagram of several other properties:
Transition-timing-function

Four, Transition-delay:

Grammar:

Transition-delay: [,]*

Transition-delay is used to specify when an animation begins to execute, that is, how long it takes to perform a transition effect after changing the value of an element's attribute: The value, the unit s (seconds), or MS (milliseconds), It is very similar to transition-duration and can be used for all elements, including: Before and: after pseudo elements. The default size is "0", which means that the transform executes immediately without delay.

Sometimes we don't just change the attributes of a CSS effect, we want to change the transition effect of two or more CSS properties, so we just string together a few transition statements, separated by commas (","), Then each can have their own different duration and the rate of their time conversion mode. But it needs to be noted that the value of Transition-delay and transition-duration is time, so to distinguish their position in ligatures, the General browser will decide according to the order, the first can be resolved to time? The P value is transition-duration and the second is transition-delay. Such as:

A
-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 attributes of the transition effect on an element, then we can also use the All property value, where they share the same continuation time and the rate conversion method, such as:

A
-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;
}
Combined above we can give transition a shorthand method: transition: The following figure shows:

Transition-suji

A corresponding sample code:

p {
-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;
}
Browser compatibility:

Transition-browers

Because transition was originally proposed by the WebKit kernel browser, Mozilla and opera are the most recent versions to support this attribute, and our popular browser IE family is not supported, in addition, due to the large modern browser Firefox,safari, Chrome,opera does not support the standard writing of the world's web, so when applying transition we need to add our respective prefixes, preferably in the standard writing of our world-class, so that the standard will cover the previous wording, as long as the browser supports our transition attributes, Then this effect is automatically added to:

Mozilla kernel
-moz-transition: [< ' transition-property ' > | | < ' transition-duration ' > | | < ' Transition-timing-function ' > | | < ' Transition-delay ' > [, [< ' Transition-property ' > | | < ' transition-duration ' > | | < ' Transition-timing-function ' > | | < ' Transition-delay ' >]]*
WebKit kernel
-webkit-transition: [< ' transition-property ' > | | < ' transition-duration ' > | | < ' Transition-timing-function ' > | | < ' Transition-delay ' > [, [< ' Transition-property ' > | | < ' transition-duration ' > | | < ' Transition-timing-function ' > | | < ' Transition-delay ' >]]*
Opera
-o-transition: [< ' transition-property ' > | | < ' transition-duration ' > | | < ' transition-timing-function ' > | | < ' Transition-delay ' > [, [< ' Transition-property ' > | | < ' transition-duration ' > | | < ' Transition-timing-function ' > | | < ' Transition-delay ' >]]*
Standard of the Consortium
   transition: [< ' transition-property ' > | | < ' transition-duration ' > | | < ' Transition-timing-function ' > | | < ' Transition-delay ' > [, [< ' Transition-property ' > | | < ' transition-duration ' > | | < ' Transition-timing-function ' > | | < ' Transition-delay ' >]]*