# 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%;  }}```

## Contributors

Interested in helping build Docs? Read the Contribution Guide or share your thoughts in this feedback form.