Transition mainly includes four attribute value introductions

Transition mainly contains four attribute values:
Properties for executing the transformation: transition-property,
Time for the continuation of the transformation: transition-duration,
During the duration period, the rate of transformation changestransition-timing-function,
transition delay timetransition-delay.
Let’s look at these four attribute values ​​separately

1. Transition-property

Syntax:

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

transition-property is used to specify that the transition effect will be executed when one of the attributes of the element changes. It mainly has the following values: none (no attribute changes); all (all attributes change). 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. ident can specify a certain attribute value of the element. The corresponding types are as follows:

• 1. Color: Transformed through red, green, blue and transparency components (each numerical value is processed) such as: background-color, border-color, color, CSS attributes such as outline-color;

• 2. Length: real numbers such as: word-spacing, width, vertical-align, top, right, bottom, left, padding, outline- properties such as width, margin, min-width, min-height, max-width, max-height, line-height, height, border-width, border-spacing, background-position;

• 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 (whole number), occur in the real number space, and when using floor() to convert to an integer, such as: outline-offset , z-index and other attributes;

• 5. number real (floating point) value, such as: zoom, opacity, font-weight, and other attributes;

• 6. Transform list: For details, please refer to: "CSS3 Transform"

• 7. Rectangle: Transform through x, y, width and height (converted to numerical values), Such as: crop

• ##8, visibility: discrete steps, within the range of 0 to 1, 0 means "hidden", 1 means completely "shown", such as: visibility

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

• 10. Gradient: Through each The position and color of the stop change. 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 supported The following situation: from gradient to gradient and color to color, then the work is similar to the above

• #12. space-separated list of above: If the list has the same item value, then each list will An item 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 single property changes

What specific CSS attributes can achieve the transition effect? ​​All CSS attribute values ​​and value types that can achieve the transition effect are listed on the W3C official website. You can click here to learn more. What needs to be reminded here is that 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. However, changes in the attribute types shown in the above table will trigger a transition action effect.

2. Transition-duration

Syntax:

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

transition-duration is used to specify the duration of the element conversion process Time, value: <time> is a numerical value, the unit is s (seconds) or ms (milliseconds), it can be applied to all elements, including :before and :after pseudo-elements. Its default value is 0, which means the transformation is immediate. </time>

3. 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>)]*</number></number></number></number></number></number></number></number>

Value:

transition-timing- The value of function allows you to change the transformation rate of the attribute value according to the advancement of time. The transition-timing-function has 6 possible values:

• 1, ease: (gradually changes Slow) default value, ease function is equivalent to Bezier curve (0.25, 0.1, 0.25, 1.0).

• 2, linear: (uniform speed), linear function is equivalent to Bezier curve Curve (0.0, 0.0, 1.0, 1.0).

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

• 4. ease-out: (deceleration), the ease-out 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 (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.

4. Transition-delay

Grammar:

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

transition-delay是用来指定一个动画开始执行的时间，也就是说当改变元素属性值后多长时间开始执行transition效果，其取值：为数值，单位为s（秒）或者ms(毫秒)，其使用和transition-duration极其相似，也可以作用于所有元素，包括:before和:after伪元素。 默认大小是"0"，也就是变换立即执行，没有延迟。

有时我们不只改变一个css效果的属性,而是想改变两个或者多个css属性的transition效果，那么我们只要把几个transition的声明串在一起，用逗号（“，”）隔开，然后各自可以有各自不同的延续时间和其时间的速率变换方式。但需要值得注意的一点：transition-delay与transition-duration的值都是时间，所以要区分它们在连写中的位置，一般浏览器会根据先后顺序决定，第一个可以解析为时间的怭值为transition-duration,第二个为transition-delay。如：

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

如果你想给元素执行所有transition效果的属性，那么我们还可以利用all属性值来操作，此时他们共享同样的延续时间以及速率变换方式，如：

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

综合上述我们可以给transition一个速记法：transition: 如下图所示：

相对应的一个示例代码：

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

 

The above is the detailed content of Transition mainly includes four attribute value introductions. For more information, please follow other related articles on the PHP Chinese website!