CSS Transitions

Master smooth animations using CSS Transitions to create interactive effects on your web elements.

CSS Transitions allow you to smoothly change property values over a specific duration, creating polished interactive effects without JavaScript.

✨ Transition Properties

CSS transitions are controlled using a combination of properties:

Property	Description
`transition`	Shorthand to define all transition properties
`transition-duration`	How long the transition takes (e.g., `0.5s`)
`transition-timing-function`	The speed curve (ease, linear, ease-in-out)
`transition-delay`	Delay before the transition starts (e.g., `0.2s`)

Example:

.box {
  transition: background-color 0.3s ease-in-out;
}

🎨 Creating Smooth Hover Effects

Transitions are often used for hover animations to improve user interaction.

.button {
  background-color: #3498db;
  color: white;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  transition: background-color 0.4s ease;
}
 
.button:hover {
  background-color: #1d6fa5;
}

🔄 Transitioning Multiple Properties

You can transition multiple properties at the same time.

.card {
  width: 200px;
  height: 100px;
  background-color: #f1f1f1;
  transition: width 0.5s ease, background-color 0.3s ease-in-out;
}
 
.card:hover {
  width: 250px;
  background-color: #e0e0e0;
}

🛠️ Transition Shorthand

Instead of writing each property separately, you can use the shorthand:

transition: [property] [duration] [timing-function] [delay];

Example:

.box {
  transition: all 0.4s ease-in-out 0s;
}

🧪 Try Yourself

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

📝 Key Takeaways

CSS Transitions are easy to add and require no extra libraries.