TheanimationshorthandCSS property applies an animation between styles. It is a shorthand foranimation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state, andanimation-timeline.

Try it

animation: 3s ease-in 1s infinite reverse both running slide-in;

animation: 3s linear 1s infinite running slide-in;

animation: 3s linear 1s infinite alternate slide-in;

animation: 0.5s linear 1s infinite alternate slide-in;

<section>  <div></div></section>

#example-element {  background-color: #1766aa;  margin: 20px;  border: 5px solid #333333;  width: 150px;  height: 150px;  border-radius: 50%;}@keyframes slide-in {  from {    margin-left: -20%;  }  to {    margin-left: 100%;  }}

Constituent properties

This property is a shorthand for the following CSS properties:

• animation-delay
• animation-direction
• animation-duration
• animation-fill-mode
• animation-iteration-count
• animation-name
• animation-play-state
• animation-timeline
• animation-timing-function

Syntax

/* @keyframes duration | easing-function | delay |iteration-count | direction | fill-mode | play-state | name */animation: 3s ease-in 1s 2 reverse both paused slide-in;/* @keyframes duration | easing-function | delay | name */animation: 3s linear 1s slide-in;/* two animations */animation:  3s linear slide-in,  3s ease-out 5s slide-out;

Theanimation property is specified as one or more single animations, separated by commas.

Each individual animation is specified as:

• zero, one, or two occurrences of the<time> value

• zero or one occurrences of the following values:

  • <single-easing-function>
  • <single-animation-iteration-count>
  • <single-animation-direction>
  • <single-animation-fill-mode>
  • <single-animation-play-state>

• an optional name for the animation, which may benone, a<custom-ident>, or a<string>

Values

<single-easing-function>

Determines the type of transition. The value must be one of those available in<easing-function>.

<single-animation-iteration-count>

The number of times the animation is played. The value must be one of those available inanimation-iteration-count.

<single-animation-direction>

The direction in which the animation is played. The value must be one of those available inanimation-direction.

<single-animation-fill-mode>

Determines how styles should be applied to the animation's target before and after its execution. The value must be one of those available inanimation-fill-mode.

<single-animation-play-state>

Determines whether the animation is playing or not. The value must be one of those available inanimation-play-state.

Description

The order of time values within each animation definition is important: the first value that can be parsed as a<time> is assigned to theanimation-duration, and the second one is assigned toanimation-delay.

The order of other values within each animation definition is also important for distinguishing ananimation-name value from other values. If a value in theanimation shorthand can be parsed as a value for an animation property other thananimation-name, then the value will be applied to that property first and not toanimation-name. For this reason, the recommended practice is to specify a value foranimation-name as the last value in a list of values when using theanimation shorthand; this holds true even when you specify multiple, comma-separated animations using theanimation shorthand.

While an animation name must be set for an animation to be applied, all values of theanimation shorthand are optional, and default to the initial value for each long-handanimation component. The initial value ofanimation-name isnone, meaning if noanimation-name value is declared in theanimation shorthand property, there is no animation to apply on any of the properties.

When theanimation-duration value is omitted from theanimation shorthand property, the value for this property defaults to0s. In this case, the animation will still occur (theanimationStart andanimationEnd events will be fired) but no animation will be visible.

In the case of theanimation-fill-modeforwards value, animated properties behave as if included in a setwill-change property value. If a new stacking context is created during the animation, the target element retains the stacking context after the animation has finished.

Accessibility

Blinking and flashing animation can be problematic for people with cognitive concerns such as Attention Deficit Hyperactivity Disorder (ADHD). Additionally, certain kinds of motion can be a trigger for Vestibular disorders, epilepsy, and migraine and Scotopic sensitivity.

Consider providing a mechanism for pausing or disabling animation as well as using theReduced Motion Media Query to create a complimentary experience for users who have expressed a preference for reduced animated experiences.

• Designing Safer Web Animation For Motion Sensitivity · An A List Apart Article
• An Introduction to the Reduced Motion Media Query | CSS-Tricks
• Responsive Design for Motion | WebKit
• MDN Understanding WCAG, Guideline 2.2 explanations
• Understanding Success Criterion 2.2.2 | W3C Understanding WCAG 2.0

Formal definition

Formal syntax

animation =
<single-animation>#

<single-animation> =
<'animation-duration'>||
<easing-function>||
<'animation-delay'>||
<single-animation-iteration-count>||
<single-animation-direction>||
<single-animation-fill-mode>||
<single-animation-play-state>||
[none|<keyframes-name>]||
<single-animation-timeline>

<animation-duration> =
[auto|<time [0s,∞]>]#

<easing-function> =
<linear-easing-function>|
<cubic-bezier-easing-function>|
<step-easing-function>

<animation-delay> =
<time>#

<single-animation-iteration-count> =
infinite|
<number [0,∞]>

<single-animation-direction> =
normal|
reverse|
alternate|
alternate-reverse

<single-animation-fill-mode> =
none|
forwards|
backwards|
both

<single-animation-play-state> =
running|
paused

<keyframes-name> =
<custom-ident>|
<string>

<single-animation-timeline> =
auto|
none|
<dashed-ident>|
<scroll()>|
<view()>

<linear-easing-function> =
linear|
<linear()>

<cubic-bezier-easing-function> =
ease|
ease-in|
ease-out|
ease-in-out|
<cubic-bezier()>

<step-easing-function> =
step-start|
step-end|
<steps()>

<scroll()> =
scroll([<scroller>||<axis>]?)

<view()> =
view([<axis>||<'view-timeline-inset'>]?)

<linear()> =
linear([<number>&&<percentage>{0,2}]#)

<cubic-bezier()> =
cubic-bezier([<number [0,1]> ,<number>]#{2})

<steps()> =
steps(<integer> ,<step-position>?)

<scroller> =
root|
nearest|
self

<axis> =
block|
inline|
x|
y

<view-timeline-inset> =
[[auto|<length-percentage>]{1,2}]#

<integer> =
<number-token>

<step-position> =
jump-start|
jump-end|
jump-none|
jump-both|
start|
end

<length-percentage> =
<length>|
<percentage>

Examples

Sun Rise

Here we animate a yellow sun across a light blue sky. The sun risesto the center of the viewport and then falls out of sight.

<div></div>

:root {  overflow: hidden; /* hides any part of the sun below the horizon */  background-color: lightblue;  display: flex;  justify-content: center; /* centers the sun in the background */}.sun {  background-color: yellow;  border-radius: 50%; /* creates a circular background */  height: 100vh; /* makes the sun the size of the viewport */  aspect-ratio: 1 / 1;  animation: 4s linear 0s infinite alternate sun-rise;}@keyframes sun-rise {  from {    /* pushes the sun down past the viewport */    transform: translateY(110vh);  }  to {    /* returns the sun to its default position */    transform: translateY(0);  }}

Animating Multiple Properties

Adding onto the sun animation in the previous example, we add a second animation changing the color of the sun as it rises and sets. The sun starts off dark red when it is below the horizon and changes to a bright orange as it reaches the top.

<div></div>

:root {  overflow: hidden;  background-color: lightblue;  display: flex;  justify-content: center;}.sun {  background-color: yellow;  border-radius: 50%;  height: 100vh;  aspect-ratio: 1 / 1;  animation: 4s linear 0s infinite alternate animating-multiple-properties;}/* it is possible to animate multiple properties in a single animation */@keyframes animating-multiple-properties {  from {    transform: translateY(110vh);    background-color: red;    filter: brightness(75%);  }  to {    transform: translateY(0);    background-color: orange;    /* unset properties i.e. 'filter' will revert to default values */  }}

Applying Multiple Animations

Here is a sun that rises and falls on a lightblue background. The sungradually rotates through a rainbow of colors. The timing of the sun'sposition and color are independent.

<div></div>

:root {  overflow: hidden;  background-color: lightblue;  display: flex;  justify-content: center;}.sun {  background-color: yellow;  border-radius: 50%;  height: 100vh;  aspect-ratio: 1 / 1;  /* multiple animations are separated by commas, each animation's parameters are set independently */  animation:    4s linear 0s infinite alternate rise,    24s linear 0s infinite psychedelic;}@keyframes rise {  from {    transform: translateY(110vh);  }  to {    transform: translateY(0);  }}@keyframes psychedelic {  from {    filter: hue-rotate(0deg);  }  to {    filter: hue-rotate(360deg);  }}

Cascading Multiple Animations

Here is a yellow sun on a lightblue background. The sun bounces between theleft and right sides of the viewport. The sun remains in the viewport eventhough a rise animation is defined. The rise animation's transform propertyis 'overwritten' by the bounce animation.

<div></div>

:root {  overflow: hidden;  background-color: lightblue;  display: flex;  justify-content: center;}.sun {  background-color: yellow;  border-radius: 50%;  height: 100vh;  aspect-ratio: 1 / 1;  /*    animations declared later in the cascade will override the    properties of previously declared animations  */  /* bounce 'overwrites' the transform set by rise, hence the sun only moves horizontally */  animation:    4s linear 0s infinite alternate rise,    4s linear 0s infinite alternate bounce;}@keyframes rise {  from {    transform: translateY(110vh);  }  to {    transform: translateY(0);  }}@keyframes bounce {  from {    transform: translateX(-50vw);  }  to {    transform: translateX(50vw);  }}

SeeUsing CSS animations for additional examples.

Specifications

Browser compatibility

See also

• Using CSS animations
• JavaScriptAnimationEvent API