animation-direction

christian.dinh2481 total contributions
Published Jul 1, 2021Updated Sep 3, 2021
Contribute to Docs
Determines whether an animation runs forward or in reverse on some or all of its cycles.
Syntax
animation-direction: <value>;
where <value>
can be one of the following:
normal
: Animation will play as specified.reverse
: Animation will be played in the reverse direction as specified.alternate
: causes the cycles to alternate betweennormal
andreverse
.alternate-reverse
: causes the cycles to alternate betweenreverse
andnormal
.
Example 1
Reverse the direction of the animation:
div {height: 200px;width: 200px;background-color: blue;animation-name: slideleft;animation-duration: 4s;animation-direction: reverse;}@keyframes slideleft {from {margin-left: 100%;}to {margin-left: 0%;}}
Example 2
Set the first direction to alternate
and the second direction to alternate-reverse
:
div {height: 200px;width: 200px;background-color: blue;animation-name: fadeout, slideright;animation-duration: 4s, 4000ms;animation-iteration-count: 2;animation-direction: alternate, alternate-reverse;}@keyframes fadeout {from {background-color: blue;}to {background-color: white;}}@keyframes slideright {from {margin-left: 0%;}to {margin-left: 100%;}}
All contributors
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- robgmerrill124 total contributions
- 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.