CSS3 animation-timing-function Property

Example

Play an animation with the same speed from beginning to end:

______________________________________________________________________________

animation-timing-function:linear;
-moz-animation-timing-function:linear; /* Firefox */
-webkit-animation-timing-function:linear; /* Safari and Chrome */

______________________________________________________________________________

Try it yourself »

More examples at the bottom of this page.

---

Browser Support

The animation-timing-function property is not supported in any of the major browsers.

Firefox supports an alternative, the -moz-animation-timing-function property.

Safari and Chrome support an alternative, the -webkit-animation-timing-function property.

---

Definition and Usage

The animation-timing-function specifies the speed curve of the animation.

The speed curve defines the TIME an animation uses to change from one set of CSS styles to another.

The speed curve is used to make the changes smoothly.

Default value:	ease
Inherited:	no
Version:	CSS3
JavaScript syntax:	object.style.animationTimingFunction="linear"

---

Syntax

animation-timing-function: value;

The animation-timing-function uses a mathematical function, called the Cubic Bèzier curve, to make the speed curve. You can use your own values in this function, or use one of the pre-defined values:

Value	Description	Play it
linear	The animation has the same speed from start to end	Play it »
ease	Default. The animation has a slow start, then fast, before it ends slowly	Play it »
ease-in	The animation has a slow start	Play it »
ease-out	The animation has a slow end	Play it »
ease-in-out	The animation has both a slow start and a slow end	Play it »
cubic-bezier(n,n,n,n)	Define your own values in the cubic-bezier function Possible values are numeric values from 0 to 1

Tip: Try the different values in the Try it Yourself section below.

---

Try it Yourself - Examples

Example

To better understand the different timing function values;
Here are five different <div> elements with five different values:

______________________________________________________________________________

#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;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari and Chrome: */
#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;}

Try it yourself »

Example

Same as the example above, but the speed curves are defined with the cubic-bezier function:

______________________________________________________________________________

#div1 {animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Firefox: */
#div1 {-moz-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-moz-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-moz-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-moz-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-moz-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}
/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,1,1;}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.25,0.1,0.25,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.42,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.58,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.42,0,0.58,1);}

Try it yourself »

---

Posted in: Animation-timing-function,Blog,CSS