Shulou(Shulou.com)06/01 Report--

This article is about how to use the css3 animation attribute Transition. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Transition: [transition-property] | | [transition-duration] | | [transition-timing-function] | | [transition-delay]

Default value: look at each individual attribute

Value:

[transition-property]: retrieve or set the properties that participate in the transition in the object

[transition-duration]: retrieves or sets the duration of the object transition

[transition-timing-function]: retrieves or sets the animation type of the transition in the object

[transition-delay]: retrieves or sets the time for delayed transition of an object

After reading this, I think this thing is almost similar to the border in css.

The example is here: http://codepen.io/kujian/pen/DreiE

For example:

Transition:color 0.2s easy-in-out .1s

This is the abbreviation.

So what if you want to take it apart?

The writing method of transition-property:color; transition-duration:.2s; transition-timing-function:ease-in-out; transition-delay:.1s; is similar to the border I just mentioned, that is, the effect is taken out, so that multiple effects can be responded at the same time. Of course, defining different rates and display intervals will also have wonderful results. Transition:color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s; that's what it looks like.

Transition-property:color, background-color, color; transition-duration:.5s, .5s, .5s; transition-timing-function:ease-in, ease-in, ease-in; transition-delay:.1s, .1s, .1s

The values for transition-property are as follows: (basically, all css attributes can be used)

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

Transition-property is used to specify that the transition effect is performed when one of the attributes of an element changes. It mainly has the following values: none (no attribute changes); all (all attribute changes), which is also its default value; indent (element attribute name) When its value is none, transition stops execution immediately, and when specified as all, the transition effect is executed when any attribute value of the element changes, and ident is a property value that can be specified. The corresponding types are as follows:

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

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 discretization step (the whole number), which occurs in the real number space and when converting to an integer using floor (), such as attributes such as outline-offset,z-index

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

6. Transform list: for more information, please see "CSS3 Transform".

7. Rectangle: through x, y, width and height (converted to numerical values) transformations, such as crop

8. Visibility: discrete step. In the range of 0 to 1 numbers, 0 means "hidden" and 1 means full "display", such as visibility.

9. Shadow: acts on color, x, y, and blur (fuzzy) attributes, such as text-shadow

10. Gradient: change by 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 animation, such as background-image

11. Paint server (SVG): only the following situations are supported: from gradient to gradient and color to color, and then work like above

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 like all individual attribute changes.

The specific CSS attribute can achieve transition effect. All the CSS attribute values and value types that can achieve transition effect are listed on the W3C official website. You can click here for details. One thing to remind you here is that not all attribute changes trigger transition action effects, such as the adaptive width of the page. When the browser changes the width, the transition effect is not triggered. However, the property type changes shown in the above table trigger a transition action effect.

Transition-duration: [,] *

Transition-duration is used to specify the duration of the element conversion process, which is a numeric value in s (seconds) and can be applied to all elements, including: before and: after pseudo-elements. The default value is 0, which means the transformation is immediate.

3. Transition-timing-function:

Syntax:

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 (,)] *

Value:

The value of transition-timing-function allows you to change the rate of change of attribute values as time progresses. There are 6 possible values for transition-timing-function:

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

2. Linear: (uniform velocity), linear function is equivalent to Bezier curve (0.0,0.0,1.0,1.0)

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

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

5. Ease-in-out: (accelerate and then decelerate), ease-in-out function is equivalent to 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) the four values are specific to points P1 and P2 on the curve. All values must be in the [0,1] area, otherwise they are invalid.

The cubic-bezier uses the Bezier curve to calculate the attribute values in the "conversion" process. As shown in the following curve, the Output Percentage of the whole process can be changed by changing the coordinates of P1 (x1, y1) and P2 (x2, y2). The initial default value is default.

Schematic diagram of several other attributes:

4. Transition-delay:

Syntax:

Transition-duration: [,] * transition-delay: [,]

Transition-delay is used to specify the time when an animation starts to execute, that is, how long to start the transition effect after changing the element attribute value, the value is a value, in s (seconds), its use is very similar to transition-duration, and can also be applied to all elements, including: before and: after pseudo elements. The default size is "0", which means that the transformation is performed immediately without delay.

By the way, the last one, this thing, different browsers have their own private properties in it.

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

}

Ie10 already supports attributes.

Thank you for reading! This is the end of this article on "how to use css3 animation attribute Transition". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.