To trigger CSS transition animation, you need to define the transition property and change the declared animated properties. 1. Define transition properties: Use transition or transition-property in CSS to specify the attributes and duration and duration to be animated; 2. Change property values: Change property values ??through:hover, JavaScript, pseudo-classes, etc.; 3. Pay attention to performance and compatibility: Avoid using transition: all, select properties that can be rendered efficiently, such as transform and opacity, and ensure that the initial state is defined. The browser will perform transition animation only when the property value changes and the property is included in the transition declaration.

You trigger a CSS transition by changing a property that's been set up to animate using the transition or transition-property rule. It's not about how you change the property — it's about which properties are changed and whether they're included in the transition declaration.

Basic Setup: Define What You Want to Animate

Before anything can transition, you need to tell the browser which properties you want to animate and how long the animation should take.

 .box {
  width: 100px;
  height: 100px;
  background-color: blue;
  transition: width 0.3s ease, background-color 0.5s ease;
}

In this example, only width and background-color will transition when they change. Other properties like height won't animate unless added to the list.

Pro tip: You can use transition: all 0.3s; to catch everything, but it can be essential and sometimes cause unexpected animations.

How to Actually Trigger the Animation

There are a few common ways to trigger a transition:

• On hover
• With JavaScript
• Using pseudo-classes like :focus or :checked

On Hover (Most Common Use Case)

This is probably what most people think of when they imagine transitions.

 .box:hover {
  width: 200px;
  background-color: red;
}

When the user hovers over .box , the width and background color change smoothly because we defined those transitions earlier.

With JavaScript (Changing Classes or Styles)

You can also toggle classes or directly manipulate styles via JavaScript:

 const box = document.querySelector('.box');
box.classList.add('active');

And in your CSS:

 .active {
  width: 200px;
  background-color: red;
}

As long as the class change affects a property with a defined transition, the animation will play.

Transition Timing and When It Plays

Transitions don't always run the moment your element loads. They only play when the property value actually changes — whether that's from a hover, click, or some other state change.

Also, keep in mind:

• If a property starts at one value and ends at another, the browser interpolates between them (eg, from width: 100px to 200px )
• Some properties aren't animatable — for example, display or z-index won't work well with transitions

A Few Gotchas to Watch Out For

• Initial state must be defined – If you define the transition on hover but not on the base state, it might not reverse properly.
• Too many transitions can hurt performance – Especially if you're animating large elements or using all carelessly.
• Hardware acceleration isn't guaranteed – Some properties (like transform and opacity ) are optimized better than others.

So, pick wisely, animate thoughtfully, and test across devices.

Basically that's it.

The above is the detailed content of How do you trigger a CSS transition?. For more information, please follow other related articles on the PHP Chinese website!