How does the @keyframes example know what information of how to generate the square?

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

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}
</style>

When put into a standard .html file layout it creates a 100×100 color-changing square. I’m confused, how is "@keyframes example" is getting the animation information from Div? I think the div becomes used by @keyframes to generate the square.

>Solution :

The CSS @keyframes syntax is a way to define generic stepped animations by providing a start and end point, and the browser smoothly animates from your starting value(s) to your ending value(s). Keyframe animations can be applied to HTML elements using the animation-name property. animation-duration defines how long the animation should take to run from start to end.

In your example, all <div> elements in the document will have the example animation applied to them because you applied it with the animation-name property:

  animation-name: example;

After the animation is complete, the animated element(s) will revert back to their original state by default. If you’re looking to preserve the ending state of the animation after it’s complete, you can accomplish this with the animation-fill-mode property.