CSS transitions和animations是實(shí)現(xiàn)網(wǎng)頁界面流暢動(dòng)效的核心工具，二者均無需JavaScript即可工作。 1. 使用transition實(shí)現(xiàn)簡單交互：當(dāng)只需在兩個(gè)狀態(tài)間平滑切換（如hover效果）時(shí)，應(yīng)使用transition，並優(yōu)先對(duì)transform和opacity屬性進(jìn)行過渡，避免引發(fā)重排的屬性如width、height。 2. 使用animation實(shí)現(xiàn)複雜序列：當(dāng)需要多關(guān)鍵幀、循環(huán)播放或自動(dòng)觸發(fā)的動(dòng)畫（如加載動(dòng)畫、入場(chǎng)效果）時(shí)，應(yīng)使用@keyframes定義animation，可精確控制iteration-count、direction和fill-mode等行為。 3. 性能優(yōu)化要點(diǎn)：始終優(yōu)先使用transform和opacity，用transform: translate()替代top/left定位，避免過度使用will-change，慎用box-shadow和filter動(dòng)畫。 4. 必須支持無障礙：通過@media (prefers-reduced-motion: reduce)關(guān)閉或縮短動(dòng)畫時(shí)長，尊重用戶偏好。 5. 可結(jié)合使用：例如模態(tài)框用animation入場(chǎng)，關(guān)閉按鈕用transition實(shí)現(xiàn)hover反饋，實(shí)現(xiàn)層次分明的交互體驗(yàn)。正確選擇工具並遵循最佳實(shí)踐，可在無JavaScript情況下構(gòu)建高性能、可訪問的精緻UI動(dòng)畫。

CSS transitions and animations are powerful tools for adding subtle, performant motion to web interfaces. They bring pages to life, improve user experience, and guide attention—without relying on JavaScript. While both create visual changes over time, they serve different purposes and work in distinct ways. Here's a practical guide to using them effectively.

CSS Transitions: Smooth Property Changes

Transitions are best when you want a CSS property to change gradually from one value to another—like fading a button on hover or sliding a menu in.

How They Work
A transition listens for a change in a CSS property (triggered by :hover , :focus , JavaScript adding a class, etc.) and smoothly animates that change over a specified duration.

Basic Syntax

 .element {
  background-color: blue;
  transition: background-color 0.3s ease;
}

.element:hover {
  background-color: red;
}

Key Properties

• transition-property : Which CSS property to animate (eg, opacity , transform , color )
• transition-duration : How long the animation takes (eg, 0.5s , 200ms )
• transition-timing-function : Controls the speed curve (eg, ease , linear , ease-in-out )
• transition-delay : Wait before starting (eg, 0.1s )

You can shorthand them:

 transition: property duration timing-function delay;

Best Practices

• Use transform and opacity for best performance—they don't trigger layout or paint.
• Avoid transitioning width , height , margin , or left/top —they cause reflows.
• Always define a starting state (eg, opacity: 1 ) so the browser knows where to transition from.

CSS Animations: Full Control with Keyframes

Animations go beyond simple hover effects. They let you define complex, multi-step sequences using @keyframes .

How They Work
You define named keyframe rules that specify styles at different points (0%, 50%, 100%), then assign that animation to an element.

Example: Fade and Slide In

 @keyframes slideIn {
  0% {
    opacity: 0;
    transform: translateX(-20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-me {
  animation: slideIn 0.5s ease-out;
}

Animation Properties

• animation-name : Name of the @keyframes rule
• animation-duration : How long one cycle takes
• animation-timing-function : Speed curve
• animation-delay : Wait before starting
• animation-iteration-count : How many times (eg, 3 , infinite )
• animation-direction : normal , reverse , alternate
• animation-fill-mode : What styles apply before/after ( forwards , backwards , both )
• animation-play-state : running (default) or paused

Shorthand:

 animation: name 2s ease-in 1s infinite alternate both;

Use Cases

• Loading spinners
• Entrance effects (fading in elements on page load)
• Repeating micro-interactions
• Complex sequences with multiple transforms

Choosing Between Transitions and Animations

Not sure which to use? Here's a quick breakdown:

• Use transitions when:

  • You want a simple, reversible change (hover, focus, class toggle)
  • The animation only has two states (start and end)
  • You want something triggered by user interaction

• Use animations when:

  • You need more than two key points (eg, bounce, pulse, loop)
  • You want automatic playback (on load, without interaction)
  • You need infinite looping or complex timing
  • You're creating sequences independent of state changes

Performance Tips and Gotchas

• Stick to transform and opacity
  These properties are optimized by the browser (often handled by the GPU). Animating top , left , width , or height forces layout recalculations and can cause jank.

• Use will-change sparingly
  It hints to the browser that an element will be animated:

   .moving-element {
    will-change: transform;
  }

  But overuse can hurt performance—only apply it when needed.

• Prefer transform: translate() over top/left
  Instead of:

   top: 10px;

  Use:

   transform: translateY(10px);

• Avoid animating box-shadow or filter on large elements
  These can be expensive. If you must, test performance on lower-end devices.

• Use prefers-reduced-motion for accessibility
  Respect users who want less motion:

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

Bonus: Combining Transitions and Animations

Sometimes you need both. For example, a modal that:

• Animates in with a keyframe animation on open
• Has a close button that smoothly fades out on hover using a transition

 .modal {
  opacity: 0;
  animation: fadeIn 0.3s forwards;
}

.close-btn {
  opacity: 0.7;
  transition: opacity 0.2s;
}

.close-btn:hover {
  opacity: 1;
}

This layered approach keeps interactions smooth and intentional.

Basically, transitions are for simple, interactive changes. Animations are for complex, self-contained sequences. Use the right tool, optimize for performance, and always consider accessibility. With these in your toolkit, your UIs will feel polished and responsive—no JavaScript required.

以上是CSS過渡和動(dòng)畫的完整指南的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！