"CSS of the Web Front End series" CSS3 animation tranition

Objective

The transition in CSS allows the CSS's 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 changes to the element, and animating the CSS property values with a sleek animation effect.
Grammar:

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

Transition consists of four property values: The properties of the transformation: Transition-property, the time of the transformation continuation: Transition-duration, the duration of the continuation period, The rate change of the transformation transition-timing-function, the transformation delay time transition-delay.
Here's a look at the four attribute values, respectively.
Example Address: https://github.com/AndyFlower/web-front/tree/master/css3/transition

First, Transition-property

Syntax: 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, 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-durtion

Grammar:

1 <  Time > <  Time >] *

Transition-duration is used to specify the duration of the element conversion process, the value:<time> is a number, in s (seconds) 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:

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

Value:
The value of transition-timing-function allows you to change the conversion rate of a property value based on the time of the push, Transition-timing-function has 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:

1 <  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 effect after changing the attribute value of the element, the 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 it should be noted that the values of Transition-delay and transition-duration are time, so to distinguish their position in the ligatures, the General browser will decide according to the order of precedence, The first 怭 value that can be resolved to a time is transition-duration and the second is transition-delay.

Browser compatibility:
Since transition was first introduced by the WebKit kernel browser, Mozilla and opera are the latest 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 are not supported by the standard way of writing, so in the application of transition we need to add their own prefix, it is best to put on the standard of our world, so the standard will cover the previous wording, as long as the browser supports our transition property, Then this effect is automatically added:

1 //mozilla Kernel2-moz-transition: [<' Transition-property'>||<' Transition-duration'>||<' Transition-timing-function'>||<' Transition-delay'>[, [<' Transition-property'>||<' Transition-duration'>||<' Transition-timing-function'>||<' Transition-delay'>]]*3 //webkit Kernel4-webkit-transition: [<' Transition-property'>||<' Transition-duration'>||<' Transition-timing-function'>||<' Transition-delay'>[, [<' Transition-property'>||<' Transition-duration'>||<' Transition-timing-function'>||<' Transition-delay'>]]*5 //opera6-o-transition: [<' Transition-property'>||<' Transition-duration'>||<' Transition-timing-function'>||<' Transition-delay'>[, [<' Transition-property'>||<' Transition-duration'>||<' Transition-timing-function'>||<' Transition-delay'>]]*7 //W3C Standard8Transition: [<' Transition-property'>||<' Transition-duration'>||<' Transition-timing-function'>||<' Transition-delay'>[, [<' Transition-property'>||<' Transition-duration'>||<' Transition-timing-function'>||<' Transition-delay'>]]*

"CSS of the Web Front End series" CSS3 animation tranition