The animation-timing-function property specifies the speed curve of the animation. This enables you to control and vary the acceleration of an animation — that is, it defines where the animation speeds up and slows down over the specified duration. While it does not affect the actual duration of an animation, it could have profound effects on how fast or slow the user perceives the animation to be. The values (or "keywords") to set the animation-timing-function property are:
Below, you can see the syntax for this property. The following example show how to achieve the different speed curves for the animation:
animation-timing-function: linear;
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
/* The element to apply the animation to */ div { width: 100px; height: 50px; background-color: red; position: relative; padding: 5px; -webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */ animation: mymove 5s infinite; } /* Chrome, Safari, Opera */ #div1 {-webkit-animation-timing-function: linear;} #div2 {-webkit-animation-timing-function: ease;} #div3 {-webkit-animation-timing-function: ease-in;} #div4 {-webkit-animation-timing-function: ease-out;} #div5 {-webkit-animation-timing-function: ease-in-out;} /* Standard syntax */ #div1 {animation-timing-function: linear;} #div2 {animation-timing-function: ease;} #div3 {animation-timing-function: ease-in;} #div4 {animation-timing-function: ease-out;} #div5 {animation-timing-function: ease-in-out;} /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { from {left: 0px;} to {left: 300px;} } /* Standard syntax */ @keyframes mymove { from {left: 0px;} to {left: 300px;} } </style> <body> <div id="div1"><b>linear: </b><br />same speed, start to end</div> <br /> <div id="div2"><b>ease: </b><br />slow start, fast, slow end</div> <br /> <div id="div3"><b>ease-in: </b><br />slow start</div> <br /> <div id="div4"><b>ease-out: </b><br />slow end</div> <br /> <div id="div5"><b>ease-in-out: </b><br />slow start & end</div> </body> |
linear:
same speed, start to end ease:
slow start, fast, slow end ease-in:
slow start ease-out:
slow end ease-in-out:
slow start & end |
Note: There is no actual property named “timing-function.” There is the transition-timing-function and the animation-timing-function properties.
