animation
The animation
shorthand CSS property applies an animation between styles. It is a shorthand for animation-name
, animation-duration
, animation-timing-function
, animation-delay
, animation-iteration-count
, animation-direction
, animation-fill-mode
, animation-play-state
, and animation-timeline
.
Try it
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
css
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes duration | easing-function | delay | name */
animation: 3s linear 1s slidein;
/* two animations */
animation: 3s linear slidein, 3s ease-out 5s slideout;
The animation
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:
- an optional name for the animation, which may be
none
, a<custom-ident>
, or a<string>
Note: animation-timeline
, animation-range-start
, and animation-range-end
are not currently included in this list, as current implementations are reset-only. This means that including animation
resets a previously-declared animation-timeline
value to auto
and previously-declared animation-range-start
and animation-range-end
values to normal
, but these properties cannot be set via animation
. When creating CSS scroll-driven animations, you need to declare these properties after declaring any animation
shorthand for it to take effect.
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 in
animation-iteration-count
. <single-animation-direction>
-
The direction in which the animation is played. The value must be one of those available in
animation-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 in
animation-fill-mode
. <single-animation-play-state>
-
Determines whether the animation is playing or not. The value must be one of those available in
animation-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 the animation-duration
, and the second one is assigned to animation-delay
.
The order of other values within each animation definition is also 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.
While an animation name must be set for an animation to be applied, all values of the animation
shorthand are optional, and default to the initial value for each long-hand animation
component. The initial value of animation-name
is none
, meaning if no animation-name
value is declared in the animation
shorthand property, there is no animation to apply on any of the properties.
When the animation-duration
value is omitted from the animation
shorthand property, the value for this property 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.
Accessibility concerns
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.
Formal definition
Initial value | as each of the properties of the shorthand:
|
---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Computed value | as each of the properties of the shorthand:
|
Animation type | Not animatable |
Formal syntax
animation =
<single-animation>#
<single-animation> =
<time> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
linear |
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<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>
<linear-easing-function> =
linear( <linear-stop-list> )
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )
<step-easing-function> =
step-start |
step-end |
steps( <integer> [, <step-position> ]? )
<linear-stop-list> =
[ <linear-stop> ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<linear-stop> =
<number> &&
<linear-stop-length>?
<linear-stop-length> =
<percentage>{1,2}
Examples
Note: Animating CSS Box Model properties is discouraged. Animating any box model property is inherently CPU intensive; consider animating the transform property instead.
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.
html
<div class="sun"></div>
css
: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.
html
<div class="sun"></div>
css
: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.
html
<div class="sun"></div>
css
: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.
html
<div class="sun"></div>
css
: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
Specification |
---|
CSS Animations Level 1 # animation |
Browser compatibility
BCD tables only load in the browser
See also
- Using CSS animations
- JavaScript
AnimationEvent
API