⚡ CSS Tutorial: transition

📌 Introduction

The transition property in CSS allows you to animate changes in CSS values smoothly over time. It makes your UI feel polished, interactive, and visually appealing — ideal for hover effects, dropdowns, modals, buttons, sliders, and more. The transition shorthand combines four properties:

  • transition-property
  • transition-duration
  • transition-timing-function
  • transition-delay

With transition, CSS changes become animations! 🎬✨

✨ Syntax

Shorthand Syntax

transition: <property> <duration> <timing-function> <delay>;

Note

Only transition-property and transition-duration are required. The rest are optional.

🧩 Components of transition

1. transition-property

Specifies which CSS property to animate.

Code Snippet

transition-property: opacity, transform;

2. transition-duration

Defines how long the transition takes.

Code Snippet

transition-duration: 0.3s;

3. transition-timing-function

Controls the speed curve of the transition (ease, linear, etc.).

Code Snippet

transition-timing-function: ease-in-out;

4. transition-delay

Adds a delay before the transition starts.

Code Snippet

transition-delay: 0.2s;

🔥 Practical Examples

1. Button Hover Animation

Button Hover

button {
  background: #3b82f6;
  color: white;
  transition: background 0.3s ease;
}

button:hover {
  background: #2563eb;
}

2. Fade-In Effect

Fade In

.box {
  opacity: 0.5;
  transition: opacity 0.4s ease-in;
}

.box:hover {
  opacity: 1;
}

3. Scale Animation

Scale Hover

.card {
  transform: scale(1);
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.05);
}

4. Multiple Transitions

Multiple Properties

.item {
  transition: opacity 0.3s ease, transform 0.4s ease;
}

.item:hover {
  opacity: 0.8;
  transform: translateY(-5px);
}

5. Delayed Animation

Delay Example

.menu {
  opacity: 0;
  transition: opacity 0.4s ease-in 0.3s;
}

.menu.open {
  opacity: 1;
}

6. Using transition with variables

CSS Variables

:root {
  --duration: 0.3s;
}

.box {
  transition: transform var(--duration) ease;
}

.box:hover {
  transform: rotate(5deg);
}

📊 Allowed Values

ValueDescription
allAnimates all properties that change
property-nameAnimates specified property
time (s/ms)Duration or delay
ease / linear / steps()Speed curve

🧠 Tips & Best Practices

  • Use transitions for micro-interactions (hover, focus, active)
  • Avoid transitioning layout-heavy properties like height or width
  • Prefer transitioning opacity and transform for performance
  • Use will-change when animating for smoother performance
  • Use cubic-bezier() for fully custom timing functions
>>“Smooth transitions transform simple interactions into delightful user experiences.” ✨

🎉 Conclusion

The transition property is one of the most powerful tools for adding motion and polish to your CSS. By mastering transition-property, duration, timing functions, and delays, you can create clean, fluid UI animations that significantly enhance user experience. Practice layering transitions and experimenting with different timings to bring your interfaces to life. 🚀