CSS Transitions and Animations enhance the user experience without JavaScript. 1. Use transition to achieve simple state changes, such as color or scaling changes during hover, and control it through transition-property, duration, timing-function and delay. It is recommended to use transform and opacity to improve performance. 2. Use @keyframes to define complex animations, such as fadeInSlideUp or infinite pulse effects, apply through the animation attribute, and you can set delay, iteration-count, direction, fill-mode and play-state for control. 3. Performance optimization suggestions include: prioritizing transform and opacity, avoiding animation layout attributes, rationally using will-change, using translate instead of top/left, and adapting accessibility through prefers-reduced-motion. 4. Select transitions for interactive feedback, and select animations for complex sequences or automatic playback. The combination of the two can create a smooth and responsive interface.

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 reccalculations.
• ? 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 (requir 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 poisoned and responsive — without a single line of JavaScript.

  The above is the detailed content of CSS Animations and Transitions: A Step-by-Step Guide. For more information, please follow other related articles on the PHP Chinese website!