CSS動(dòng)畫應(yīng)優(yōu)先使用transition和@keyframes，1. 簡單狀態(tài)變化用transition，如懸停效果；2. 復(fù)雜多步動(dòng)畫用@keyframes，如滑入滑出；3. 始終優(yōu)先動(dòng)畫transform和opacity以確保性能；4. 避免動(dòng)畫布局屬性如width和height；5. 合理使用will-change或translateZ提升圖層；6. 通過prefers-reduced-motion尊重用戶偏好，最終實(shí)現(xiàn)流暢且高性能的動(dòng)畫效果。

Animating with CSS doesn’t have to be complicated — but to get smooth, performant results, you need to understand the tools at your disposal and how to use them wisely. CSS offers two primary ways to create animations: transitions and keyframe animations. When used correctly, they’re lightweight, easy to maintain, and can run at 60fps without taxing the browser.

Let’s break down how each works, when to use them, and what to watch out for performance-wise.

When to Use CSS Transitions

Transitions are perfect for simple, state-based changes — like hovering over a button or toggling a menu. They define how a property changes from one state to another over time.

.button {
  background-color: #007bff;
  transition: background-color 0.3s ease;
}

.button:hover {
  background-color: #0056b3;
}

Key points:

• Triggered only when a property change occurs (e.g., :hover, :focus, or a class toggle via JavaScript).
• Best for two-state animations (start and end).
• You don’t control intermediate steps — just duration, timing function, and delay.

Pro tip: Avoid transitioning properties that trigger layout or paint-heavy operations, like height, width, or margin. Stick to transform and opacity whenever possible for smoother performance.

Using @keyframes for Complex Animations

When you need more control — like bouncing, pulsing, or multi-step motion — use @keyframes. This lets you define intermediate steps in an animation.

@keyframes slide-in {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-element {
  animation: slide-in 0.5s ease-out;
}

Key features:

• Define exact styles at specific points (0%, 25%, 50%, etc.).
• Can loop, play in reverse, or use fill modes (animation-fill-mode).
• Ideal for entrance effects, loaders, or repeating visual cues.

You can also control playback with:

• animation-delay
• animation-iteration-count (e.g., 3 or infinite)
• animation-direction (e.g., alternate)

Performance: What Makes CSS Animations Smooth?

Even simple animations can jank if they trigger expensive browser work. Here’s how to keep things silky smooth:

? Animate Transform and Opacity

These properties are optimized by the browser and can be handled by the GPU via layer compositing.

/* Good — GPU-accelerated */
transform: translateX(10px);
opacity: 0.8;

/* Avoid — triggers layout/paint */
left: 10px;
width: 200px;

? Promote Elements to Their Own Layer (Carefully)

Use transform: translateZ(0) or will-change to hint that an element will be animated:

.promoted {
  will-change: transform;
  /* or: transform: translateZ(0); */
}

But don’t overuse will-change — it can increase memory usage and slow things down if applied too broadly.

? Avoid Animating Layout Properties

Animating height, width, top, left, etc., forces the browser to recalculate layout on every frame — this is expensive.

Instead:

• Use transform: scale() for size changes.
• Use transform: translateY() instead of changing top or margin-top.

? Use requestAnimationFrame for JS-Triggered Sync

If you're toggling animation classes via JavaScript, batch DOM reads and writes to avoid layout thrashing. Use requestAnimationFrame when syncing visual updates.

Bonus: Prefers-Reduced-Motion

Always consider users who may be sensitive to motion:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

This respects user preferences set in the OS and improves accessibility.

Animating with CSS is powerful and performant when you stick to the right properties and patterns. Use transitions for simple interactions, keyframes for detailed sequences, and always prioritize transform and opacity for buttery-smooth results.

Basically: keep it simple, respect performance, and test on lower-end devices when possible.

以上是使用CSS動(dòng)畫：過渡，鑰匙幀和性能的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！