animation-timing-function
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%;}}