Home  >  Article  >  Web Front-end  >  css3 animation attribute transition (conversion)_html/css_WEB-ITnose

css3 animation attribute transition (conversion)_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:47:381316browse

CSS3 transition allows CSS attribute values ​​to transition smoothly within a certain time interval.

Syntax:

transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]* 
Transition mainly contains four attribute values: transition-property (transformation attribute), transition-duration (the duration of the transformation), transition-timing-function (the rate of transformation during the duration period), transition-delay (transformation delay time).

transition-property:

Specifies that the transition effect will be executed when one of the properties of the element changes. It mainly has the following values: none( no attributes changed); all (all attributes changed), this is also its default value; indent (element attribute name). When its value is none, the transition will stop executing immediately. When it is specified as all, the transition effect will be executed when any attribute value of the element changes. Indent can specify a certain attribute value of the element. Not all attribute changes trigger the transition action effect, such as the adaptive width of the page. When the browser changes the width, the transition effect will not be triggered.

transition-duration:

Specifies the duration of the element conversion process, the value:

transition-timing-function:

The value of transition-timing-function allows you to change the transformation rate of attribute values ​​​​as time progresses, transition- The timing-function has 6 possible values:

1, ease: (gradually slower) default value, the ease function is equivalent to the Bezier curve (0.25, 0.1, 0.25 , 1.0).
2. linear: (uniform speed), the linear function is equivalent to the 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 The function is equivalent to the Bezier curve (0, 0, 0.58, 1.0).
5. ease-in-out: (accelerate and then decelerate), the ease-in-out function is equivalent to the Bezier curve Er 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. The four values ​​(x1, y1, x2, y2) are specific to points P1 and P2 on the curve. All values ​​must be within the [0, 1] range, otherwise they will be invalid. As shown in the figure:


transition-delay:

Specify the time when an animation starts to execute , that is to say, how long does it take to start the transition effect after changing the element attribute value? Its value:

Use cases:

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


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn