animation

jameskeezer12 total contributions
Published Jul 8, 2021Updated Oct 4, 2023
Contribute to Docs
Shorthand property that sets the animations for an element.
Syntax
animation: <value>;
where <value>
can be and of the following keywords:
animation-fill-mode
:forwards
animation-delay
:2s
animation-duration
:4s
animation-iteration-count
:infinite
animation-direction
:alternate
animation-timing-function
:linear
animation-name
: keyframes ruleanimation-play-state
:running
Note: If you do not specify animation-duration
property, the default value is 0s
, resulting in the animation not being played. The order of time values is important. The first will be applied to animation-duration
and the second to animation-delay
.
Example 1
Set fadetowhite
animation to run two seconds, loop infinitely, and alternate directions:
div {height: 100px;width: 100px;background-color: #000;animation: fadetowhite 2s infinite alternate;}@keyframes fadetowhite {from {background-color: #000;}to {background-color: #fff;}}
The following gif runs as a loop to demonstrate the code block above:
Example 2
Set party
animation to last for two seconds, delay one second, loop five times and run in reverse:
div {height: 100px;width: 100px;background-color: pink;animation: party 2s 1s 5 reverse;}@keyframes party {0% {background-color: red;}25% {background-color: green;}50% {background-color: blue;}75% {background-color: yellow;}100% {background-color: purple;}}
The following gif runs as a loop to demonstrate the code block above:
All contributors
- jameskeezer12 total contributions
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- robgmerrill124 total contributions
- jameskeezer
- christian.dinh
- Anonymous contributor
- robgmerrill
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.