CSS Transition Transition Detailed

Transition transition

IE10, Firefox, Chrome, and Opera support transition properties.

Safari requires a prefix of-webkit-.

The prefix-webkit-is required for Chrome 25 and earlier versions.

IE9 and earlier versions do not support the transition property.

Transition properties

Transition-property: Specifies the name of the CSS property that applies the transition effect (when the specified CSS property changes, the transition effect starts), and its default value is all.

transition-duration: Specifies the time required to complete the transition (in S or ms) with a default value of 0s, which means that if you do not specify this property, the transition will not be rendered.

transition-timing-function: A time curve that specifies the transition effect.

Default ease: Slow start, middle becomes fast, slow end, equivalent to Cubic-bezier (0.25, 0.1, 0.25, 1).

Optional liner: Uniform motion, equivalent to Cubic-bezier (0, 0, 1, 1).

Optional ease-in: Slow start, equivalent to Cubic-bezier (0.42, 0, 1, 1).

Optional ease-out: end at slow speed; equivalent to Cubic-bezier (0, 0, 0.58, 1)

Optional ease-in-out: Slow start, slow end, equivalent to Cubic-bezier (0.42, 0, 0.58, 1)

Optional Cubic-bezier (n, N, N, N): Customizes the value between 0 and 1 in the Bezier function.

Bezier Time Curve ...

Transition-delay: Specifies the delay time for the transition effect, which defaults to 0s.

Composite properties

When you use a composite property to define a transition effect, the child properties are separated by a space.

transition:width 2s linear;

The Transition property can specify multiple values, separated by commas when multiple values are specified.

Transition:width 2s ease-in-out, height 2s ease-in-out;

Transition phase

The "1" transition is divided into two stages: forward (forward) and reverse (reverse).

"2" If the forward stage is not completed before entering the reverse phase, then the initial value of the reverse phase is the instantaneous value at the end of the forward phase.

"3" to: hover pseudo-Class as an example, if the Transition property is set in a non-hover state, it is equivalent to setting the reverse state, at which time the forward and reverse are consistent.

{    width: 100px;     height: 100px;     background-color: cyan;     Transition: width 2s, height 2s;}  {    width: 300px;     Height: 300px;}

This code means that when the mouse hovers, the width becomes 300px, the height becomes 300px, the transition time is 2s, and when the mouse leaves, the width becomes 100px, the height becomes 100px, and the transition time is 2s.

However, if the transition property is also set in the hover state, the hover state is the forward state, and the non-hover state is the reverse state.

{    width: 100px;     height: 100px;     background-color: cyan;     Transition: width 2s, height 2s;}  {    width: 300px;     Height: 300px;     Transition: width 5s, height 5s;}

This code means that when the mouse hovers, the width becomes 300px, the height becomes 300px, the transition time is 5s, and when the mouse leaves, the width becomes 100px, the height becomes 100px, and the transition time is 2s.

Note: When setting the Transition property in the hover state, it is clear which properties require a transition and which do not.

"4" When the child element and parent element transition properties are consistent: If the parent element is transitioning when the child element transitions, the value of the intermediate state of the parent element transition is the initial value of the child element transition, and similarly, if the child element transition does not complete the transition of the parent element, the value of the intermediate state of the child element transition is the initial

{    font-size: 48px;     transition: font-size 3s;}  {    font-size: 48px;     Transition: font-size 10s;}

It is important to note that when the child element is consistent with the parent element's transition, but the transition time is inconsistent, such as the preceding code, the child element has a transition time of 10 seconds, the transition time of the parent element is 3 seconds, and when the mouse hovers over the child element, the transition time of the parent element is calculated. When the transition on the child element is 2 seconds, the transition time for this property is only 1 seconds when the mouse is moved into the parent element and the parent element transitions.

"5" does not transition when a transition is required when the initial value of the property is auto.

{    width: 100px;     height: 100px;     margin: 30px auto;     background-color: cyan;}  {    transition: margin-left 5s;     Margin-left: 500px;}

The "6" implicit transition refers to a change in one property that causes another property to change.

{    width: 300px;     height: 300px;     Border: 1em solid black;}  {    font-size: 48px;     Transition: font-size 3s;}

As the font-size changes, the width of the border changes as well.

Firefox and IE support an implicit transition.

Reference:

Deep understanding of CSS transitions Transition

CSS Transition Transition Detailed