Detailed description of css3 animation transition AND css3transition

Detailed description of css3 animation transition AND css3transition

Transition mainly includes four attribute values:
Attributes for performing the transformation:transition-property,
The duration of the change:transition-duration,
Change Rate During the durationtransition-timing-function,
Change Delay Timetransition-delay.
Here are the four attribute values.

1. transition-property

Syntax:

transition-property ： none | all | [ <IDENT> ] [ ',' <IDENT> ]*

transition-propertyIt is used to specify the transition effect when one of the element's attributes changes. It mainly has the following values: none (no attribute changes); all (all attributes changed), which is also its default value; indent (element attribute name ). When its value is none, the transition stops immediately. When it is set to all, the element will execute the transition effect when any attribute value changes. The ident is a property value that can be specified for an element. The corresponding types are as follows:

• 1. color: the css attributes such as background-color, border-color, color, and outline-color are transformed by the red, green, blue, and transparency components (each value is processed;

• 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), which take place in the real numeric space and when floor () is used to convert to an integer, such as outline-offset and z-index;

• 5. Real (floating point) values of number, such as zoom, opacity, font-weight, and other attributes;

• 6. transform list: For details, see CSS3 Transform.

• 7. rectangle: converts values by x, y, width, and height, for example, crop.

• 8. visibility: discrete step. In the range of 0 to 1, 0 indicates "hidden", and 1 indicates "completely" displayed ", for example: visibility

• 9. shadow: applies to color, x, y, and blur attributes, such as text-shadow.

• 10. gradient: changes the position and color of each stop. They must have the same type (radial or linear) and the same stop value for animation, such as background-image.

• 11. paint server (SVG): Only the following conditions are supported: From gradient to gradient and from color to color, and then the work is similar to the above

• 12. space-separated list of above: if the list has the same project value, each item in the list changes according to the preceding rules. Otherwise, no changes are made.

• 13. a shorthand property: If all part of the abbreviation can be animated, it will change like all single attribute changes.

The W3C official website lists all css attribute values and value types that can achieve the transition effect. For details, click here. It should be noted that not all attribute changes will trigger the effect of the transition action, such as the adaptive width of the page. When the browser changes the width, the effect of the transition will not be triggered. However, the attribute type change shown in the preceding table triggers a transition action.

Ii. transition-duration

Syntax:

transition-duration ： <time> [, <time>]* 

transition-durationIs used to specify the duration of the element conversion process, value: <time> is a numerical value, unit is s (seconds) or ms (milliseconds), can act on all elements, including: before and: after pseudo element. The default value is 0, that is, it is real-time during transformation.

Iii. transition-timing-function

Syntax:

transition-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>)]* 

Valid value:

transition-timing-functionThe value allows you to change the conversion rate of the attribute value based on time. transition-timing-function has six possible values:

• 1. Slow: (gradually slow down) default value. The Lag Function is equivalent to the besell curve (0.25, 0.1, 0.25, 1.0 ).

• 2. linear: (uniform speed). The linear function is equivalent to the besell curve (0.0, 0.0, 1.0, 1.0 ).

• 3. Inflow-in: (acceleration). The inflow-in function is equivalent to the besell curve (0.42, 0, 1.0, 1.0 ).

• 4. Forward-out: (slowing down). The forward-out function is equivalent to the besell curve (0, 0, 0.58, 1.0 ).

• 5. Slow-in-out: (acceleration and then deceleration). The slow-in-out function is equivalent to the besell curve (0.42, 0, 0.58, 1.0)

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

Iv. transition-delay

Syntax:

transition-delay ： <time> [, <time>]* 

transition-delayIs used to specify the time when an animation starts to run, that is, the time after the element attribute value is changed to start performing the transition effect. The value <time> is a value, in seconds) or ms (ms), which is similar to transition-duration and can also act on all elements, including: before AND: after pseudo elements. The default size is "0", that is, the conversion is executed immediately without delay.

Sometimes we want to change the transition effect of two or more css attributes, instead of changing the attribute of the css effect. We only need to concatenate several transition declarations and use commas (, "), and each of them can have their own different continuation time and their time rate conversion methods. However, it is worth noting that the values of transition-delay and transition-duration are both time values. Therefore, to distinguish the locations of these values in the write link, the browser generally determines the order of order, the first shard value that can be parsed as time istransition-duration, The second istransition-delay. For example:

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 execute all the attributes of the transition effect for the element, we can also useallIn this case, they share the same duration and rate conversion method, for example:

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;  }

Based on the above, we can give transition a stenographer: transition: <property> <duration> <animation type> <delay>, as shown in:

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;}