@keyframes

The @keyframes property sets the steps in the animation of an element by defining the styles through the time period of the animation. The animation is created due to the change in the CSS styles from one set to another of that element. Those sets of styles are specified inside @keyframes with the time period where that style sets are implemented.

Syntax

@keyframes animation_name {keyframes-selector {css-styles;}}

Here, All the values are required.

Example

@keyframes colorChange {
  0%    { background-color: black; }
  50%   { background-color: red; }
  100%  { background-color: green; }
}

.animate_me {
  animation: colorChange 5s infinite;
}

Property Values

animation_name: sets the name of the animation.

keyframes-selector: percentage of the animation duration. (0 - 100%)

css-styles: sets the CSS styles to be applied on that time period.