Preface:

Transition is a transition animation on the web. Before CSS3, most animations on the web were implemented in Flash, but flash animation has some disadvantages, such as inconvenience.

Transition is a compound attribute, including transition-property, transition-duration, transition-timing-function, and transition-delay.

transition: property duration timing-function delay;
Copy the code
1, the transition property

This property specifies the name of the CSS property to which the transition effect is applied. The transition effect starts when the specified CSS property changes.

Transitions typically occur when the user floats the mouse pointer over an element.

Values:

  • None: No attributes get transition effects
  • All: All attributes now have a transition effect
  • Property: A comma-separated list of CSS property names that define the transition effect
2, the transition – duration

This property is in seconds s or milliseconds ms.

Note:

  • This attribute cannot be negative
  • If the value is 0s, it is the default value. If it is 0, it is invalid. So you have to bring units
  • When the value is single, that is, all transition attributes correspond to the same time; If the value is multiple, the transition attributes correspond to the duration in sequence
3, the transition – timing – function

The transition time function is used to define the transition speed change effect of the element transition attribute with time change

Values:

  • Linear: A transition effect that starts and ends at the same speed
cubic-bezier(0.0.1.1)
Copy the code
  • Ease: A transition effect that starts slowly, then speeds up, then ends slowly
cubic-bezier(0.25.0.1.0.25.1)
Copy the code
  • Ease-in: a transition effect that starts slowly
cubic-bezier(0.42.0.1.1)
Copy the code
  • Ease-out: Transition effect that ends at a slow speed
,0,0.58 cubic - the bezier (0, 1)Copy the code
  • Ease-in-out: a transition effect with a slow start and finish
Cubic - the bezier (0.42, 0,0.58, 1)Copy the code
  • Step-start: directly at the end
steps(1,start)
Copy the code
  • Step-end: at the beginning and ends after a time interval
steps(1,end)
Copy the code
  • Cubic – Bezier (n, n, n, n) : Define its own value in the cubic- Bezier function. Possible values are between 0 and 1
4, the transition – delay

This attribute defines how much time the element attribute has to delay before the transition effect begins, in seconds s or milliseconds ms.

Note:

  • If this property is negative, there is no delay effect, but the starting value of the transition element changes from 0 to a set value (set value = delay time + duration). If the set value is less than or equal to 0, there is no transition effect; If this value is greater than 0, the transition element completes the rest of the transition effects from this value
  • If the value is 0s, it is the default value. If it is 0, it is invalid. So you have to bring units
  • When the value is single, that is, all transition attributes correspond to the same time; If the value is multiple, the transition attributes correspond to the duration in sequence

Example:

<style>
div {
    width: 300px;
    height: 100px;
    padding-top: 20px;
    line-height: 100px;
    margin: 200px auto 0;
    text-align: center;
    font-size: 40px;
    font-weight: bold;
    font-family: 'Chinese Script';
    background: # 000;
    color: #ff6600;
}
</style>

<div>study hard and make progress every day</div>
Copy the code

Then, add hover effect to div

<style>
div:hover {
    text-shadow: 0px 0px 2px #fff.0px -3px 3px #1eb.0px -6px 4px #01defd.0px -12px 6px #08f;
}
</style>
Copy the code

When you hover over the div, the text shadow appears momentarily

Next, we modify the hover effect

<style>
div {
    transition: all 1s liner 0s;
}
</style>
Copy the code

When the mouse enters the div, the background shadow transitions for 1s.