@keyframes-rule

@keyframes rule is used to define animations using a set of keyframes.

Keyframes are frames that specify the styles that an element should have at various points during the animation.

Syntax:

@keyframes animationName {
  0% { /* Styles at the start of the animation */
    /* CSS properties */
  }
  50% { /* Styles at the middle of the animation */
    /* CSS properties */
  }
  100% { /* Styles at the end of the animation */
    /* CSS properties */
  }
}

Example:

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(60px);
  }
  100% {
    transform: translateX(120px);
  }
}

Applying Animation:

Once the "@keyframes" rule is defined, we can apply the animation to an element using the animation property.

Syntax:

selector {
  animation: animationName duration timing-function delay iteration-count direction fill-mode;
}

Example:

.card {
  animation: slide 2s ease-in-out 0s infinite alternate;
}

animationName: Specifies the name of the keyframes animation.
timing-function: Specifies the timing function for the animation (e.g., "ease", "linear", "ease-in-out", etc.).
duration: Specifies the duration of the animation.
iteration-count: Specifies the number of times the animation should repeat ("infinite" for "indefinite").
delay: Specifies the delay before the animation starts.
fill-mode: Specifies how the element styles should be applied before and after the animation (e.g., "forwards", "backwards", "both", "none").
direction: Specifies whether the animation should play "forward", "backwards", or "alternate".

Note:

Keyframes allow us to define complex animations with multiple steps and transitions.
Animations created using "@keyframes" are supported across modern browsers and provide a powerful way to add dynamic effects to web pages.
We can define multiple "@keyframes" rules for different animations and apply them selectively to elements.

<-- Pseudo Classes

Animation -->