CSS Transition vs Animation: What's the Difference?

What's the difference between CSS transitions and animations?

CSS transitions allow property changes in CSS values to occur smoothly over a specified duration, while animations can create more complex sequences of changes.

Can you give me an example of a CSS transition?

Sure! Here's a simple example:

.button {
  background-color: blue;
  transition: background-color 0.5s;
}
.button:hover {
  background-color: green;
}

This changes the button's background color smoothly when hovered.

What about an example of a CSS animation?

Absolutely! Here's a basic animation example:

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
.box {
  width: 100px;
  height: 100px;
  animation: example 2s infinite;
}

This will animate a box from red to yellow continuously.

When should I use transitions over animations?

Use transitions for simple state changes (like hover effects) and animations for more complex sequences or when you need to control multiple properties.