What are CSS animation keyframes?

What are CSS animation keyframes?

CSS animation keyframes define the styles at various points during an animation sequence. They allow you to create smooth transitions.

Can you show me an example of how to use keyframes in CSS?

Sure! Here's a simple example:

@keyframes example {
  0% {background-color: red;}
  50% {background-color: yellow;}
  100% {background-color: green;}
}

div {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
}

This will change the background color of a div from red to yellow to green.

How do I control the speed of the animation?

You can control the speed of the animation using the animation-duration property. For example, setting it to 2s will make the animation complete in 2 seconds.

Can I have multiple animations on the same element?

Yes, you can apply multiple animations by separating them with commas in the animation property. Each animation can have its own duration and timing.