CSS Property animation-timing-function

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

Summary

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

CSS Syntax

animation-timing-function: linear|ease|ease-in|ease-out|cubic-bezier(n,n,n,n);

Property Values

linear: animation has the same speed from start to end
ease(Default value): The animation has a slow start, then fast, ends slowly
ease-in: The animation has a slow start
ease-out: The animation has a slow end
ease-in-out: animation has both a slow start and a slow end
cubic-bezier(n,n,n,n): Define speend function in the cubic-bezier function. Possible values are numeric values from 0 to 1.

Browser compatibility


`animation-timing-function`	4.0 -webkit-	10.0	16.0 (5.0 -moz-)	4.0 -webkit-	15.0 -webkit- (12.0 -o-)

Example

The following code shows how to use linear speed function.

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--   ww w .java  2  s.c  om-->
    width: 100px;
    height: 100px;
    background: red;
    position: relative;
    -webkit-animation: mymove 5s infinite;  /* Chrome, Safari, Opera */
    -webkit-animation-timing-function: linear;  /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
    animation-timing-function: linear;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 200px;}
}
</style>
</head>
<body>

<div></div>

</body>
</html>

Click to view the demo

Example 2

The following code compares the speed functions.

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from  w ww  .j a v a 2 s  . c om-->
    width: 100px;
    height: 50px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    -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;}

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

@keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}
</style>
</head>
<body>

<div id="div1">linear</div>
<div id="div2">ease</div>
<div id="div3">ease-in</div>
<div id="div4">ease-out</div>
<div id="div5">ease-in-out</div>

</body>
</html>

Click to view the demo

Example 3

The following code shows how to use the cubic-bezier in animation-timing-function.

<!DOCTYPE html>
<html>
<head>
<style> 
div {<!--from w w w.  ja va 2  s .com-->
    width: 100px;
    height: 50px;
    background: red;
    color: white;
    font-weight: bold;
    position: relative;
    -webkit-animation: mymove 5s infinite;  /* Chrome, Safari, Opera */
    animation: mymove 5s infinite;
}

/* Chrome, Safari, Opera */
#div1 {-webkit-animation-timing-function: cubic-bezier(0,0,0.2,1);}
#div2 {-webkit-animation-timing-function: cubic-bezier(0.2,0.1,0.2,1);}
#div3 {-webkit-animation-timing-function: cubic-bezier(0.4,0,1,1);}
#div4 {-webkit-animation-timing-function: cubic-bezier(0,0,0.6,1);}
#div5 {-webkit-animation-timing-function: cubic-bezier(0.4,0,0.6,1);}

#div1 {animation-timing-function: cubic-bezier(0,0,0.2,1);}
#div2 {animation-timing-function: cubic-bezier(0.2,0.1,0.2,1);}
#div3 {animation-timing-function: cubic-bezier(0.4,0,1,1);}
#div4 {animation-timing-function: cubic-bezier(0,0,0.6,1);}
#div5 {animation-timing-function: cubic-bezier(0.4,0,0.6,1);}

/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}

@keyframes mymove {
    from {left: 0px;}
    to {left: 300px;}
}
</style>
</head>
<body>

<div id="div1">cubic-bezier(0,0,0.2,1)/div>
<div id="div2">cubic-bezier(0.2,0.1,0.2,1)</div>
<div id="div3">cubic-bezier(0.4,0,1,1)</div>
<div id="div4">cubic-bezier(0,0,0.6,1)</div>
<div id="div5">cubic-bezier(0.4,0,0.6,1</div>

</body>
</html>

Click to view the demo