CSS transitions enable smooth property changes with minimal code, ideal for hover effects and interactive feedback. 1. Use the syntax transition: property duration timing-function delay; to define transitions, like transition: background-color 0.3s ease 0.1s;. 2. Specify transition-property for the CSS property to animate, preferring background-color, opacity, or transform over non-interpolatable properties like display. 3. Set transition-duration to control animation length, such as 0.3s, which is required for the transition to run. 4. Apply transition-timing-function like ease, linear, or cubic-bezier() to define pacing. 5. Use transition-delay to delay the start, for example 0.1s. 6. List multiple transitions with commas for complex effects. 7. Prioritize transform and opacity for GPU acceleration and better performance. 8. Keep durations between 200–500ms for a responsive feel. 9. Avoid transition: all 0.3s; to prevent unintended animations. 10. Do not animate layout properties like width or height on large elements to avoid jank. 11. Replace display toggles with opacity and pointer-events for smooth show/hide effects, as in .fade { opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } and .fade.active { opacity: 1; pointer-events: auto; }. 12. Use shorthand for conciseness or longhand for clarity. 13. Ensure the CSS property actually changes state (e.g., via :hover or class changes) to trigger the transition. When properly applied, CSS transitions create fast, subtle, and performant interactions that enhance user experience without JavaScript.

CSS transitions are a simple way to control animation speed when changing CSS properties — perfect for hover effects, button states, or layout changes. You don’t need JavaScript or complex keyframes. Just a few lines of CSS, and you’ve got smooth visual feedback.

Here’s how to use them effectively.

What Are CSS Transitions?

A CSS transition lets you define how a property should change over time when it shifts from one value to another — like when a user hovers over a button. It’s not an animation in the traditional sense, but a smooth interpolation between two states.

The basic syntax:

transition: property duration timing-function delay;

Example:

button {
  background-color: blue;
  transition: background-color 0.3s ease 0.1s;
}

button:hover {
  background-color: red;
}

This makes the background color change from blue to red over 0.3 seconds, with a slight 0.1s delay and an "ease" timing curve.

Key Transition Properties

You don’t have to set all values every time — most can be omitted and will fall back to defaults.

• transition-property
  Which CSS property to animate. Common ones: background-color, opacity, transform, width, color.
  Use all to animate any changing property (not recommended for performance).

• transition-duration
  How long the animation takes (e.g., 0.5s or 500ms). Must be specified, or the transition won’t run.

• transition-timing-function
  Controls the pacing. Options include:

  • ease (default, starts slow, ends slow)
  • linear (constant speed)
  • ease-in, ease-out, ease-in-out
  • cubic-bezier(x1, y1, x2, y2) — custom curve

• transition-delay
  How long to wait before starting (e.g., 0.2s).

You can also set multiple transitions:

button {
  transition: 
    background-color 0.3s ease,
    transform 0.2s linear,
    opacity 0.4s ease-in-out;
}

Best Practices and Tips

Not all properties can be transitioned — only those with interpolatable values (numbers, colors, lengths). For example, you can't smoothly transition display: none to block, but you can fade with opacity and visibility.

? Do This:

• Use transform and opacity for best performance (GPU-accelerated).
• Keep durations short (200–500ms) for responsive feel.
• Add transitions to interactive elements (buttons, links) for feedback.

? Avoid:

• transition: all 0.3s; — it can animate unintended properties.
• Animating layout properties like width, height, or margin on large elements (can cause jank).
• Using transitions on display or z-index — they don’t interpolate.

Example of a smooth button hover:

.btn {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.btn:hover {
  background: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

Shorthand vs. Longhand

Use shorthand for simplicity:

transition: background-color 0.3s ease;

Or longhand for clarity:

transition-property: background-color;
transition-duration: 0.3s;
transition-timing-function: ease;
transition-delay: 0s;

Shorthand is more common and concise.

When Transitions Don’t Work — Common Fixes

• Forgot duration? Transition won’t run if no time is set.
• Property not changing? Transitions only trigger when the value changes (e.g., hover, class toggle).
• Using display or visibility? These don’t animate smoothly — use opacity pointer-events instead.

Example for showing/hiding:

.fade {
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.fade.active {
  opacity: 1;
  pointer-events: auto;
}

Basically, CSS transitions are your go-to for subtle, performant interactions. Keep them focused, fast, and on properties that matter. Once you get the hang of it, you’ll add them everywhere — buttons, menus, icons, cards. They make static sites feel alive.

The above is the detailed content of CSS transitions tutorial. For more information, please follow other related articles on the PHP Chinese website!