What is the difference between transition and animation in CSS?

What is the difference between transition and animation in CSS?

CSS transitions allow you to change property values smoothly over a specified duration when an element's state changes. In contrast, animations can create more complex sequences of changes, including keyframes.

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 from blue to green when hovered over.

What about an example of a CSS animation?

Absolutely! Here's a basic animation example:

@keyframes example {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}
.element {
  animation: example 1s infinite;
}

This makes the element move up and down continuously.

When should I use transitions instead of animations?

Use transitions for simple state changes that require smoothness, like hover effects. Use animations for more complex sequences or when you need to control multiple properties over time.