Animation-related attributes in css3: Transform, transition, and animation

ArticleDirectory

• Transition-Duration
• Transition-timing-Function
• Transition-Delay

In css3, there are three animation-related attributes. Transform , Transition And animation. Here is a one-to-one explanation:   Transform
  Literally, the definition of transform is changed to make... Deformation; conversion. Here we can understand it as deformation. How can it be changed? None indicates that the rotation is not performed. Rotate rotation transform: Rotate (20deg) can be negative. The base point of the transform-origin-defined rotation can be left top center right bottom or coordinate value (50px 70px ). Skew twist transform: skew (30deg, 30deg) skew (tilt relative to the X axis, tilt relative to the Y axis) scale Scale Transform: Scale (2, 3) scale 2 times horizontal, vertical zoom 3 times. For example, you can add a parameter to proportional amplification. Translate move transform: translate (50px, 50px ); Matrix matrix deformation basic syntax: Transform: matrix (A, C, B, D, TX, Ty); where A, C, B, D is a two-dimensional matrix:

 

 
┌ ┐ │ A B │ c d │ └ ┘
 

 
A: X axis zoom ratio B: Y axis tilt C: Y axis zoom ratio D: X axis tilt
 

 
TX and ty are the elements that are located based on the X and Y coordinates. ActuallyTranslate (TX, Ty)



Transition
The transition of css3 in W3C standards is described as follows: "The transition of CSS allows the attribute value of CSS to smoothly transition within a certain period of time. This effect can be triggered by mouse clicking, getting focus, being clicked, or changing any element, and the CSS attribute values can be smoothly changed with the animation effect.
 

Transition mainly includes four attribute values:Transition-property:Attributes for performing the transformation;
 

 
Transition-Duration:Conversion continuationTime:
 

 
Transition-timing-function:The rate change during the continuation period;
 

 
Transition-Delay:Change Delay Time
 

 
The following describes the four attributes:
 

 
Transition-Property
 

Syntax:

Transition-property: None | all | [<ident>]

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

1. Color: The color is transformed by the red, green, blue, and transparency components (each value is processed separately), such as background-color, border-color, color, and outline-color CSS attributes;

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 step (the entire number) occurs in the real numeric space and when floor () is used to convert it to an integer, such as Outline-offset and Z-index;

5. Real (float type) values of a number, such as Zoom, opacity, and font-weight;

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 full "display", 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.

SupportedExecute the transition effectProperties:

Property name	Type
Background-color	As Color
Background-Position	As Repeatable list Of Simple list Of Length, percentage, or calc
Border-bottom-color	As Color
Border-bottom-Width	As Length
Border-left-color	As Color
Border-left-Width	As Length
Border-right-color	As Color
Border-right-Width	As Length
Border-spacing	As Simple list Of Length
Border-top-color	As Color
Border-top-Width	As Length
Bottom	As Length, percentage, or calc
Clip	As Rectangle
Color	As Color
Font-size	As Length
Font-weight	As Font weight
Height	As Length, percentage, or calc
Left	As Length, percentage, or calc
Letter-spacing	As Length
Line-height	As either Number Or Length
Margin-bottom	As Length
Margin-left	As Length
Margin-Right	As Length
Margin-top	As Length
Max-height	As Length, percentage, or calc
Max-Width	As Length, percentage, or calc
Min-height	As Length, percentage, or calc
Min-Width	As Length, percentage, or calc
Opacity	As Number
Outline-color	As Color
Outline-Width	As Length
Padding-bottom	As Length
Padding-left	As Length
Padding-Right	As Length
Padding-top	As Length
Right	As Length, percentage, or calc
Text-indent	As Length, percentage, or calc
Text-shadow	As Shadow list
Top	As Length, percentage, or calc
Vertical-align	As Length
Visibility	As Visibility
Width	As Length, percentage, or calc
Word-spacing	As Length
Z-Index	As Integer

 

Transition-Duration Transition-duration is used to specify the duration of the element conversion process. The value <time> is a numerical value, measured in seconds. It can act on all elements, including: Before and: after pseudo element. The default value is 0, that is, it is real-time during transformation. Transition-timing-Function

Valid value:

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

1. Slow: (gradually slowing 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.

The value of the attribute value in the "Conversion" process is calculated by using the béserx curve, as shown in the following curve, by changing p1 (x1, Y1) and P2 (X2, Y2) can change the output percentage of the entire process. The default value is default.

Transition-Delay

Transition-delay is used to specify the time when an animation starts to be executed, that is, how long after the element attribute value is changed to start performing the transition effect. The value <time> is a numerical value, the Unit is S (seconds). It 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 value can be resolved to the duration value of time as transition-duration, and the second value as transition-delay. For example:

A {transition: Background 0.5 s audio-in, color 0.3 s audio-out}

If you want to perform all the attributes of the transition effect on the element, you can also use the all attribute value for the operation. At this time, they share the same duration and rate conversion method, for example:

A {transition: All 0.5 s transfer-in}

}

 

Animation

The name implies the meaning of an animation. The animation is applied to the page Dom to produce animation effects. Start IntroductionAnimationBefore that, we need to first understand a special thing, that is"Keyframes", We call it" Key Frame ". Friends who have played flash may be familiar with this thing.

Example of a Website:

@-WebKit-keyframes 'wobble '{0% {margin-left: 100px; Background: green;} 40% {margin-left: 150px; Background: orange ;} 60% {margin-left: 75px; Background: Blue;} 100% {margin-left: 100px; Background: red ;}}
 

 
Here we define an animation named "wobble", with any name. In several stages, 0% 40% 60% is used for the transition.
 

After keyframes is defined, you can call the defined Animation "wobble.

Next, let's see how to call the animation attribute for an element.

 
. Demo1 {width: 50px; Height: 50px; margin-left: 100px; Background: Blue;-WebKit-animation-Name: 'wobble ';/* animation attribute name, that is, the animation name defined by keyframes */-WebKit-animation-Duration: 10 s;/* animation duration */-WebKit-animation-timing-function: animation-in-out;/* animation frequency, which is the same as transition-timing-function */-WebKit-animation-delay: 2 S; /* animation delay time */-WebKit-animation-iteration-count: 10;/* define cyclic data. Infinite is infinite times */-WebKit-animation-direction: Alternate; /* define the Animation Mode */}
 

 
Animation-Name:
 

 
Animation-Name: it is used to define the name of an animation, which is the name in keyframes. Otherwise, there will be no animation effect. None is the default value. If the value is none, there will be no animation effect. In addition, this attribute is the same as the preceding transition. We can attach several animations to an element. We only need to separate them with commas.
 

The animation of css3 is similar to the transition attribute. They all change the element's attribute values over time. The main difference between them is that transition needs to trigger an event (hover event or click event) to change its CSS attributes over time; however, animation can explicitly change the attribute value of element CSS over time without triggering any event to achieve an animation effect. In this way, we can directly call the animation attribute of animation in an element. Based on this, the animation attribute value of css3 needs to be clearly defined, which is returned to what we mentioned above, we need keyframes to define CSS attribute values of different time periods to achieve the effect of element changes in different time periods.