要觸發(fā)CSS過渡動畫，需先定義transition屬性并更改已聲明的可動畫屬性。1. 定義過渡屬性：在CSS中使用transition或transition-property指定要動畫的屬性及持續(xù)時間；2. 更改屬性值：通過:hover、JavaScript、偽類等方式改變屬性值；3. 注意性能與兼容性：避免使用transition: all，選擇可高效渲染的屬性如transform和opacity，并確保初始狀態(tài)已定義。只有當屬性值發(fā)生變化且該屬性被包含在transition聲明中時，瀏覽器才會執(zhí)行過渡動畫。

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 inefficient 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 (e.g., 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.

基本上就這些。

以上是您如何觸發(fā)CSS過渡？的詳細內容。更多信息請關注PHP中文網(wǎng)其他相關文章！