animation CSS property

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 class="flex-column" id="default-example">
  <div id="example-element"></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-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-direction
• animation-iteration-count
• animation-fill-mode
• animation-play-state
• animation-timeline

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;

Values

One or more single <animation> declarations, separated by commas, with each <animation> including:

<keyframes-name> or none

The name of a @keyframes at-rules that specifies the animation to apply to an element. The initial value for animation-name is none.

<animation-duration>

Determines the length of time that an animation takes to complete one cycle. The value must be one of those available in animation-duration. The initial value is 0s.

<easing-function>

Determines the type of transition. The value must be one of those available in animation-timing-function. The initial value is ease.

<animation-delay>

Determines the amount of time to wait from applying the animation to an element before beginning to perform the animation. The value must be one of those available in animation-delay. The initial value is 0s.

<single-animation-direction>

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

<single-animation-iteration-count>

The number of times the animation is played. The value must be one of those available in animation-iteration-count. The initial value for animation-iteration-count is 1.

<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 in animation-fill-mode. The initial value for animation-fill-mode is none.

<single-animation-play-state>

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

<single-animation-timeline>

Determines the timeline used to control the progress of the animation. The value must be one of those available in animation-timeline. The initial value is auto.

Description

The animation property is specified as one or more single animations, separated by commas. Each animation within the comma-separated list of animations sets the animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state, and animation-timeline. If any of the components are not included in an animation declaration, the component value is set to the component's initial value.

animation-name

The <animation-name> component of each animation is the name for the animation, which may be none, a <custom-ident>, or a <string>. The initial value of animation-name is none, meaning if no animation-name value is declared in the animation shorthand property, no animation is applied to any of the properties.

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

Time values

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

When no animation-duration value is specified in the animation shorthand property, the duration defaults to 0s. In this case, the animation will still occur (the animationStart and animationEnd events will be fired), but no animation will be visible to the user.

animation-timeline

The current implementations of animation are reset-only: if no <animation-timeline> is included in the animation shorthand, the shorthand declaration will reset any previously-declared animation-timeline values to auto.

By default, the animation-timeline is the documentTimeline. If a value is included, but the user-agent doesn't support <animation-timeline> values within the shorthand, the declaration is invalid and ignored.

This means that, when creating CSS scroll-driven animations, you need to declare the animation-timeline property after declaring any animation shorthand for it to take effect.

Alternatively, the animation-timeline can be used within the animation shorthand within a CSS @supports block, such as:

@supports (animation: view()) {
  /* CSS for browsers that support setting <animation-timeline> within the animation shorthand */
}

animation-fill-mode and new stacking contexts

In the case of the animation-fill-mode forwards value, animated properties behave as if included in a set will-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 the Reduced 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 rises to the center of the viewport and then falls out of sight.

<div class="sun"></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 class="sun"></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 sun gradually rotates through a rainbow of colors. The timing of the sun's position and color are independent.

<div class="sun"></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 the left and right sides of the viewport. The sun remains in the viewport even though a rise animation is defined. The rise animation's transform property is 'overwritten' by the bounce animation.

<div class="sun"></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);
  }
}

See Using CSS animations for additional examples.

Specifications

Browser compatibility