HTML animation transitions: achieve smooth element state changes

Introduction

        In HTML, you can use the CSS transition (Transition) property to create animation effects, so that the properties of an element transition smoothly to a new state within a certain period of time. This tutorial will introduce in detail how to use HTML animation transitions and sample codes.

---

Transition property (transition-property)

Transition properties are used to specify CSS properties to transition. You can select one or more attributes to transition.

• basic grammar

.element {
  transition-property: property1, property2, ...;
}

In the code above, .elementis the selector for the element you want to apply the transition to. property1, property2, ...is the name of the property you want to change in the transition, separated by commas.

• Single attribute transition

.element {
  transition-property: width;
}

The above code will cause .elementthe element's width property to change on transition. When the element's width changes, the transition will fire and transition smoothly to the new width value.

• Multiple property transitions

.element {
  transition-property: width, height, opacity;
}

The above code will cause .elementthe element's width, height and transparency properties to change on transition. Regardless of these attributes