CSS3 animation-timing-function Property

Here is a brief description of how to specify the speed curve of the animation in CSS3 using the CSS3 animation-timing-function property.

Explanation

Property :

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


Where,
inear - The animation has the same speed from start to end
ease- Default value. The animation has a slow start, then fast, before it ends slowly
ease-in - The animation has a slow start
ease-out - The animation has a slow end
ease-in-out - The animation has both a slow start and a slow end
cubic-bezier(n,n,n,n) - Define your own values in the cubic-bezier function. Possible values are numeric values from 0 to 1
initial - Sets this property to its default value.
inherit - Inherits this property from its parent element.

Usage:


animation-timing-function: linear;
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;

Definition:

The animation-timing-function property 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. A mathematical function called Cubic Bezier curve is used in this property to make the speed curve. You can use your own values in this function, or use one of the pre-defined values.

It takes the following values.
  • ease: Default value.
  • linear : specifies an animation with the same speed from start to end
  • ease-in : specifies an animation with a slow start
  • ease-out : pecifies an animation with a slow end.
  • ease-in-out :specifies an animation with a slow start and end.
  • cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function

Example :
<style>
.demodiv {
width: 150px;
height: 50px;
background-color: green;
font-weight: bold;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
}
/* 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 */
#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 */
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
</style>
<div id="div1" class='demodiv'>linear</div>
<div id="div2" class='demodiv'>ease</div>
<div id="div3" class='demodiv'>ease-in</div>
<div id="div4" class='demodiv'>ease-out</div>
<div id="div5" class='demodiv'>ease-in-out</div>

Result:

linear
ease
ease-in
ease-out
ease-in-out



Ask Questions

Ask Question