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> ]*

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

transition-duration ： <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.

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

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.

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

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

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

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!