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>
![CSS.gif]()
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>