CSS @keyframes

The CSS @keyframes rule is used to specify styles at certain points during an animation. By defining keyframes we can control the intermediate steps in the animation. An animation is created by gradually changing from one set of CSS styles to another. The @keyframes rule can include as many intermediate keyframes as you like.

Let's take a look at an example to see how @keyframes works:

<div id="animated-div"></div>

In this example, we have a <div> element with the ID "animated-div" that we will animate using @keyframes.

Now, let's define the animation using @keyframes:

@keyframes move {
  0% { 
    left: 0;
  }
  50% {
    left: 200px;
  }
  100% {
    left: 0;
  }
}

In this @keyframes rule, we define three keyframes (0%, 50%, and 100%) for the "move" animation. The left property is used to move the <div> element horizontally.

Next, we apply the animation to the <div> element:

#animated-div {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: relative;
  animation: move 2s infinite;
}

By setting the animation property on the #animated-div element to "move 2s infinite", we apply the "move" animation with a duration of 2 seconds and it will repeat infinitely.

That's how you can use @keyframes in CSS to create animations on your web pages!