Demon Tech Roadmap

CSS

CSS Transitions

CSS transitions smoothly animate single property changes.

Read Time

5 min read

Difficulty

Beginner

Last Updated

Jun 15, 2026

Version

v1.0.0

Introduction

CSS transitions create simple animations when an element changes state, like hovering over a button. Instead of instantly changing colors, the transition tells the browser to slowly blend the old color into the new one.

Syntax

1/* transition syntax */
2.btn {
3  transition: background-color 0.3s ease;
4}

Example

1/* this fades a hover effect */
2div {
3  background: blue;
4  transition: background 0.5s;
5}
6
7div:hover {
8  background: red;
9}

Key Points

Transitions only fire when a property value changes.
You must specify the property to transition.
You must specify the duration of the effect.
The `ease` timing function creates a natural slow-down effect.

Up Next

Continue your journey with the next topic.

Go to CSS Transforms ❯