CSS Transitions and Animations

A button that instantly snaps from grey to green feels dead. A button that smoothly fades to green over a quarter of a second feels alive. That smoothness is a transition. And a ball that bounces on its own, or a card that slides into view when the page loads, is an animation. Both are pure CSS — no JavaScript needed at all.

Diagram — see how it fits together

The difference is simple: a transition is a smooth change between two states, like normal and hover. An animation is a set of steps that plays on its own, like a bounce or a spin, and it can repeat forever.

Transitions — smooth changes on hover

A transition needs two things: a starting style, a different style on :hover, and the transition property telling the browser to glide between them instead of jumping. You say which property changes and how long the glide takes — transition: background-color 0.3s means "when the background colour changes, take 0.3 seconds to get there".

Syntax — a button that grows on hover

.btn {
  background-color: #04aa6d;
  color: white;
  padding: 12px 24px;
  transition: background-color 0.3s, transform 0.3s;
}
.btn:hover {
  background-color: #038857;
  transform: scale(1.1);
}

When the mouse hovers over the button, its colour darkens and it grows by 10% — both changes glide smoothly over 0.3 seconds. When the mouse leaves, the button glides back. You can list several properties in one transition, separated by commas.

Animations — @keyframes

An animation is a small movie written in CSS. The @keyframes rule describes the steps: what the element looks like at the start (from or 0%), in the middle, and at the end (to or 100%). Then the element is told which animation to play, how long it takes, and how many times to repeat it.

@keyframes bounce {
  0% { transform: translateY(0); }
  50% { transform: translateY(-40px); }
  100% { transform: translateY(0); }
}
.ball {
  animation: bounce 1s infinite;
}

The ball rises 40 pixels at the halfway point and lands again at the end, and infinite makes it bounce forever. Change infinite to a number like 3 and it bounces exactly three times.

Common mistakes

• Writing the :hover style but forgetting the transition property — the change happens instantly instead of gliding.
• Putting transition only on the :hover rule — it must be on the normal rule, so the glide works both when the mouse arrives and when it leaves.
• Forgetting the @keyframes name must match the animation name — a spelling difference means nothing moves.
• Animating width or margin for a simple hover effect — transform: scale() does the same job far more smoothly.
• Making animations too long or repeating everything forever — movement should guide the eye, not distract from the content.

Remember

• A transition glides between two states, like normal and :hover.
• transition: background-color 0.3s says which property changes and how long it takes.
• Put transition on the normal rule, not on :hover.
• @keyframes describes the steps; animation plays them, for a time and a number of repeats.
• Animate transform and opacity for the smoothest movement.

Example explained

• .btn { transition: background-color 0.3s, transform 0.3s; } — the button is told to glide for 0.3 seconds whenever its colour or size changes.
• .btn:hover { transform: scale(1.1); } — on hover the button grows 10% bigger and turns a darker green, smoothly instead of snapping.
• @keyframes bounce — the three steps of the ball's jump: on the ground at 0%, 40 pixels up at 50%, and back on the ground at 100%.
• .ball { animation: bounce 1s infinite; } — the ball plays the bounce animation, one second per bounce, forever.
• .card { animation: slide-in 0.8s; } — the welcome card slides in from the left once when the page loads, using translateX from -100px to 0.