✨ CSS Transitions

? Quick Overview

Use transitions when a CSS property changes from one state to another (for example, normal ➝ :hover).
Control what changes (property), how long it takes (duration), and how it feels (timing function).
Great with transform, opacity, background-color, color, etc.
Common for buttons, cards, navigation links, images, and subtle UI animations.

? Key Concepts

transition-property: The property or properties that should animate (for example, background-color, transform).
transition-duration: How long the animation lasts (for example, 0.3s, 500ms).
transition-timing-function: The speed curve of the animation:
- ease: Default smooth curve.
- linear: Constant speed.
- ease-in: Starts slow, ends fast.
- ease-out: Starts fast, ends slow.
- ease-in-out: Slow at start and end.
- cubic-bezier(): Custom curve.
transition-delay: How long to wait before the animation starts.
Shorthand: Use the single transition property instead of writing all four separate properties.

? Syntax / Theory

? View Code Example

/* Shorthand syntax for CSS transitions */
selector {
transition: property duration timing-function delay;
}

Examples of valid shorthand values:

? View Code Example

/* Transition only background-color over 0.3s */
button {
transition: background-color 0.3s ease-in-out;
}
/* Transition multiple properties together */
.card {
transition: transform 0.4s ease, box-shadow 0.4s ease;
}

? Timing Function Comparison

The timing function controls how the speed of the animation changes from start to end.

Timing Function	Description	Typical Use Case
`ease`	Default smooth effect	General UI animations
`linear`	Constant speed from start to end	Progress bars, loaders, timers
`ease-in`	Starts slow, finishes fast	Elements entering the screen
`ease-out`	Starts fast, ends slowly	Elements leaving or fading out
`ease-in-out`	Slow at start and end	Buttons, cards, smooth hover effects

? Live Output — Basic Hover Transition

Hover over the square box below to see the background color and size animate smoothly.

What is happening?

In the normal state, the box is red (tomato).
On :hover, the background changes to dodgerblue and the box scales up.
The transition makes this change smooth instead of instant.

? Example Code — Basic Transition

? View Code Example

/* Basic transition on background and scale */
.box {
width: 100px;
height: 100px;
background-color: tomato;
transition-property: background-color, transform;
transition-duration: 0.5s;
transition-timing-function: ease;
transition-delay: 0s;
}
.box:hover {
background-color: dodgerblue;
transform: scale(1.2);
}

? Advanced Example — Floating Card

This example uses the shorthand transition to animate both box-shadow and transform for a floating effect.

Hover Me

How it feels in UI

When you hover the card, it smoothly lifts up and casts a stronger shadow, creating a floating effect that feels responsive and modern.

? View Code Example

/* Card that smoothly lifts on hover */
.card {
width: 200px;
height: 150px;
background: #fafafa;
border: 1px solid #ddd;
border-radius: 10px;
transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.card:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
transform: translateY(-10px);
}

? Common Use Cases

Buttons that change color and size on hover.
Cards that slightly lift with a shadow when hovered or focused.
Navigation links that smoothly change color or show an underline.
Images that zoom in slightly on hover.
Modals, alerts, and tooltips that fade in or out with opacity transitions.

? Tips & Best Practices

Use transition: all only for quick prototypes. In production, specify exact properties (for example, transition: transform 0.3s ease;).
Prefer animating transform and opacity for better performance.
Keep durations between 0.15s and 0.5s for small UI interactions so the interface still feels fast.
Use browser dev tools to visually tweak durations and timing functions until the animation feels right.
Use cubic-bezier() when you need a custom feel (for example, snappy or bouncy animations).

? Try It Yourself

Create a button that fades its background color and grows slightly on hover using transition.
Use transition-delay to delay a hover effect and see how it affects UX.
Animate opacity from 0.5 to 1 on hover for a subtle fade-in effect.
Create a div that moves to the right on hover using transform: translateX() with a smooth transition.
Experiment with ease, ease-in-out, and a custom cubic-bezier() curve for the same animation and compare the feel.