CSS Transitions和Animations無(wú)需JavaScript即可增強(qiáng)用戶體驗(yàn)。 1. 使用transition實(shí)現(xiàn)簡(jiǎn)單狀態(tài)變化，如hover時(shí)的顏色或縮放變化，通過(guò)transition-property、duration、timing-function和delay控制，推薦使用transform和opacity以提升性能。 2. 使用@keyframes定義復(fù)雜動(dòng)畫(huà)，如fadeInSlideUp或無(wú)限脈衝效果，通過(guò)animation屬性應(yīng)用，並可設(shè)置delay、iteration-count、direction、fill-mode和play-state進(jìn)行控制。 3. 性能優(yōu)化建議包括：優(yōu)先使用transform和opacity，避免動(dòng)畫(huà)layout屬性，合理使用will-change，採(cǎi)用translate代替top/left，以及通過(guò)prefers-reduced-motion適配可訪問(wèn)性。 4. 交互反饋選transitions，複雜序列或自動(dòng)播放選animations，二者結(jié)合可打造流暢、響應(yīng)式界面。

CSS Animations and Transitions are powerful tools for adding subtle (or dramatic) motion to web elements — all without relying on JavaScript. They improve user experience by providing visual feedback, guiding attention, and making interfaces feel more dynamic. Let's walk through both concepts step by step, with practical examples.

1. CSS Transitions: Smooth Property Changes

Transitions are best for simple, state-based changes — like when a button changes color on hover or a menu slides in when clicked.

Key Properties:

• transition-property : Which CSS property to animate (eg, background-color , transform ).
• transition-duration : How long the transition takes (eg, 0.3s ).
• transition-timing-function : Controls the speed curve (eg, ease , linear , ease-in-out ).
• transition-delay : Optional delay before the transition starts.

You can shorthand them using the transition property.

Example: Hover Button Effect

 .button {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.button:hover {
  background-color: #0056b3;
  transform: scale(1.05);
}

? Tip : Use transform and opacity for smoother performance — they don't trigger layout or paint reflows.

2. CSS Animations: Full Control with @keyframes

When you need more complex motion — like bouncing, looping, or multi-step effects — use @keyframes and the animation property.

Step 1: Define the Animation with @keyframes

 @keyframes fadeInSlideUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

This animation starts hidden and slightly below, then fades in and moves up.

Step 2: Apply the Animation to an Element

 .card {
  animation: fadeInSlideUp 0.6s ease-out;
}

You can also control:

• 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 (eg, forwards keeps the final state).
• animation-play-state : Pause/resume with paused or running .

Full Example: Pulsing Loading Indicator

 @keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}

.loader {
  width: 20px;
  height: 20px;
  background-color: #007bff;
  border-radius: 50%;
  animation: pulse 1.5s infinite ease-in-out;
}

? Note : Animations run as soon as the element loads unless delayed. Use animation-play-state: paused to control it via JavaScript later.

3. Best Practices and Performance Tips

Even though CSS animations are performant, misuse can cause jank. Follow these guidelines:

• ? Use transform and opacity — they're GPU-accelerated.
• ? Avoid animating margin , width , height , or top/left — they trigger layout recalculations.
• ? Leverage will-change for elements you know will animate:

   .animated-element {
    will-change: transform, opacity;
  }

  (Use sparingly — overuse can hurt performance.)

• ? Prefer transform: translate() over changing left / top for moving elements.
• ? Use prefers-reduced-motion for accessibility :

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

  ---

  4. When to Use Transitions vs. Animations

  Use Case	Choose
  Hover effects, focus states	Transitions
  Loading spinners, loaders	Animations
  Complex multi-step effects	Animations
  Simple color/scale changes	Transitions
  Infinite loops or sequences	Animations

  Transitions are event-driven (require a trigger like hover), while animations run independently once applied.

  ---

  Basically, transitions are your go-to for interactive feedback, and animations give you full control for more expressive motion. Used wisely, they make your site feel polished and responsive — without a single line of JavaScript.

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