Overview
CSS animations let you play a sequence of style keyframes over time. Unlike a transition, which animates a single change from one value to another, an animation follows a timeline you define. It can run through multiple steps, repeat, and even start on its own. If you've written @keyframes in CSS on the web, you already know the idea.
animationName
animationName lets you specify keyframes for the animation.
animationDuration
animationDuration lets you specify the length of time the animation lasts. Defaults to 0.
animationDelay
animationDelay lets you specify the length of time to wait before animation starts. Defaults to 0.
animationTimingFunction
animationTimingFunction lets you adjust how intermediate values are calculated during the transition. It can be specified for the entire animation or for each keyframe separately. Defaults to ease.
animationDirection
animationDirection lets you specify which direction the animation should run. Defaults to normal.
animationIterationCount
animationIterationCount lets you repeat an animation given number of times or run it indefinitely. Default to 1.
animationFillMode
animationFillMode lets you specify how the computed styles will be persisted before the animation runs and after it finishes. Defaults to none.
animationPlayState
animationPlayState lets you play and pause the animation. Defaults to running.
Animation Callbacks
# Animation Callbacks