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

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

Syntax:

transition ： [ ||  ||  ||  [, [ ||  ||  || ]]* 

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: is a numerical value, the unit is s ( seconds) or ms (milliseconds), can be applied to all elements, including :before and :after pseudo-elements. The default value of is 0, which means the transformation is immediate.

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: is a numerical value, and the unit is s (seconds) or ms (milliseconds). Its use is very similar to transition-duration. Can also be applied to all elements, including :before and :after pseudo-elements. The default size is 0, which means the transformation is performed immediately without delay.

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