CSS - Transitions

Overview

Quick links: Exercises • Checks • Print as PDF

Estimated time: 10–15 minutes

Transitions animate changes smoothly. Use them to provide feedback and reduce cognitive load.

Learning Objectives

• Define transitions for properties and set timing curves.
• Compose multiple transitions for compound effects.

Details & Examples

.btn{ transition: background-color .2s ease, transform .15s ease; }
.btn:hover{ transform: translateY(-1px); }

Try it

Checks for Understanding

1. What’s the default transitioned property if unspecified?

Exercises

1. Add hover transitions to buttons for background-color and transform. Respect reduced-motion preferences.
2. Build a focus-visible transition that increases outline-offset smoothly for keyboard users.