Animation Timing Function in CSS3

Mahak Gupta
12y
7.3k
0
0
100
Article

It specifies the speed curve of the animation. The animation-timing-function uses a mathematical function, called the Cubic Bezier curve, to make the speed curve.

Syntax:

animation-timing-function: value;

It has five values: linear, ease, ease-in, ease-out, ease-in-out. Here we discuss all the values of animation-timing-function.

linear: In this case the animation has a same speed from start to end.
ease: This is the default value. In this case, the animation has a slow start, then fast, before it ends slowly.
ease-in: In this case, the animation has a slow start.
ease-out: In this case, the animation has a slow end.
ease-in-out: In this case, the animation has both a slow start and a slow end.

The following code is for Google Chrome and Safari:

<html>
<head>
<style type="text/css">
div
{
width:50px;
height:50px;
background:pink;
color:black;
font-weight:bold;
position:relative;
animation:myfirstmove 5s infinite;
-webkit-animation: myfirstmove 5s infinite; /* Safari and Google Chrome */
}

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

/* The following Code is for Safari and Google 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;}

@keyframes myfirstmove
{
from {left:10px;}
to {left:250px;}
}
@-webkit-keyframes myfirstmove /* Safari and Google Chrome */
{
from {left:10px;}
to {left:250px;}
}
</style>
</head>
<body>
<div id="div1">My</div>
<div id="div2">Name</div>
<div id="div3">is</div>
<div id="div4">Mahak</div>
<div id="div5">Gupta</div>

</body>
</html>

The following code is for Mozilla Firefox:

<html>
<head>
<style type="text/css">
div
{
width:50px;
height:50px;
background:pink;
color:black;
font-weight:bold;
position:relative;
animation:myfirstmove 5s infinite;
-moz-animation: myfirstmove 5s infinite; /* Mozilla Firefox */

}

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

/* The following Code is for Mozilla 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;}

@keyframes myfirstmove
{
from {left:10px;}
to {left:250px;}
}
@-moz-keyframes myfirstmove /* Mozilla Firefox */
{
from {left:10px;}
to {left:250px;}
}
</style>
</head>
<body>
<div id="div1">My</div>
<div id="div2">Name</div>
<div id="div3">is</div>
<div id="div4">Mahak</div>
<div id="div5">Gupta</div>
</body>
</html>

Up Next

Ebook Download

View all

JavaScript Interview Q & A

Read by 40 people

Download Now!

Learn

View all