animation

Definition

In CSS, the animation property is used to specify the name of the keyframes to use for an animation, as well as other animation options such as the duration, timing function, and iteration count. The animation property is a shorthand property that combines several other animation-related properties into a single declaration.

Examples

Simple animation

.animated-element {
  animation: my-animation 5s linear infinite;
}

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100px);
  }
}

Animation with multiple keyframes

.animated-element {
  animation: my-animation 5s linear infinite;
}

@keyframes my-animation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

Value

Best Practices

• Use the animation property in conjunction with the @keyframes rule to specify the keyframes for the animation.
• Specify a clear purpose for the animation and consider how it will enhance the user experience.
• Use appropriate timing and duration for the animation. Avoid making the animation too long or too short.
• Use the animation-timing-function property to fine-tune the speed curve of the animation.
• Use the animation-delay property to control the timing of the animation.
• Use the animation-iteration-count property to specify the number of times the animation should repeat.
• Use the animation-direction property to specify the direction in which the animation should play.
• Use the animation-fill-mode property to specify how the animation should apply styles to the element before and after the animation.
• Use the animation-play-state property to pause or resume the animation.

Browser Compatibility