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
, and animation-play-state
.
Try it
/* @keyframes duration | easing-function | delay |
iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;
/* @keyframes name | duration | easing-function | delay */
animation: slidein 3s linear 1s;
/* @keyframes name | duration */
animation: slidein 3s;
A description of which properties are animatable is available; it's worth noting that this description is also valid for CSS transitions.
Constituent properties
This property is a shorthand for the following CSS properties:
Syntax
The animation
property is specified as one or more single animations, separated by commas.
Each individual animation is specified as:
- zero or one occurrences of the following values:
- an optional name for the animation, which may be
none
, a<custom-ident>
, or a<string>
- zero, one, or two
<time>
values
The order of 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 within each animation definition is also important for distinguishing animation-name
values from other keywords. When parsed, keywords that are valid for properties other than animation-name
, and whose values were not found earlier in the shorthand, must be accepted for those properties rather than for animation-name
. Furthermore, when serialized, default values of other properties must be output in at least the cases necessary to distinguish an animation-name
that could be a value of another property, and may be output in additional cases.
Values
<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
.
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 no 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 | discrete |
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 |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number>
<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>
<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> ]? ) <step-position>
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
Examples
Cylon Eye
<div class="view_port">
<div class="polling_message">
Listening for dispatches
</div>
<div class="cylon_eye"></div>
</div>
.polling_message {
color: white;
float: left;
margin-right: 2%;
}
.view_port {
background-color: black;
height: 25px;
width: 100%;
overflow: hidden;
}
.cylon_eye {
background-color: red;
background-image: linear-gradient(to right,
rgba(0, 0, 0, .9) 25%,
rgba(0, 0, 0, .1) 50%,
rgba(0, 0, 0, .9) 75%);
color: white;
height: 100%;
width: 20%;
-webkit-animation: 4s linear 0s infinite alternate move_eye;
animation: 4s linear 0s infinite alternate move_eye;
}
@-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }
@keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }
See Using CSS animations for additional examples.
Specifications
Specification |
---|
CSS Animations Level 2 # animation |
Browser compatibility
BCD tables only load in the browser
See also
- Using CSS animations
- JavaScript
AnimationEvent
API