animation-timing-function

christian.dinh2481 total contributions
Published Jul 8, 2021Updated Sep 3, 2021
Contribute to Docs
Defines an acceleration curve for each keyframe in a single animation.
Syntax
animation-timing-function: <value>;
where <value>
can be one of the following keywords:
step-start
: The easing curve for an animation that starts quickly and decelerates.step-end
: The easing curve for an animation that starts slowly and decelerates.linear
: The easing curve for an animation that starts and ends at the same speed.ease
: The easing curve for an animation that starts and ends at the same speed.ease-in
: The easing curve for an animation that starts slowly and accelerates.ease-out
: The easing curve for an animation that starts slowly and decelerates.ease-in-out
: The easing curve for an animation that starts and ends at the same speed.cubic-bezier()
: The easing curve for an animation that starts and ends at the same speed.
Note: Applied property by property from keyframe to keyframe.
Example 1
Apply ease-in-out
to the animation-timing-function
property of the div
element:
div {height: 200px;width: 200px;background-color: blue;animation-name: slideright;animation-duration: 4s;animation-timing-function: ease-in-out;}@keyframes slideright {0% {margin-left: 0%;}50% {margin-left: 50%;}100% {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.