Hello readers, this is a smalll blog on animation-timing-function property. This property defines the speed of the animation. The animation-timing-function property, is used to define a function that defines how a transition will change during each cycle. These timing functions are also called easing functions. Easing functions have some predefined values. The possible values are:
ease-out - It defines an animation with a slow end
ease - This is default value. It defines an animation with a slow start, then fast, then end slowly.
ease-in - It defines defines an animation with a slow start
linear - It defines an animation having same speed from start to end
ease-in-out - It defines an animation with a slow start and end
cubic-bezier(n,n,n,n) - is used to define our own values in a cubic-bezier function
In this example I have create five circles of same width and height but different colour, I have applied different values of animation-timing-function property to each circle to show you the effect of different value and the difference between them.
html code is written below
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="box1">LINEAR</div>
<div id="box2">EASE</div>
<div id="box3">EASE-IN</div>
<div id="box4">EASE-OUT</div>
<div id="box5">EASE-OUT-IN</div>
</body>
</html>
css is written below
div {
width: 100px;
height: 100px;
font-weight: bold;
position: relative;
-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera */
animation: mymove 5s infinite;
padding:20px;
text-align:center;
border:1px solid black;
border-radius:80px;
}
/* Chrome, Safari, Opera */
#box1 {-webkit-animation-timing-function: linear;}
#box2 {-webkit-animation-timing-function: ease;}
#box3 {-webkit-animation-timing-function: ease-in;}
#box4 {-webkit-animation-timing-function: ease-out;}
#box5 {-webkit-animation-timing-function: ease-in-out;}
/* Standard syntax */
#box1 {animation-timing-function: linear; background-color: yellow;}
#box2 {animation-timing-function: ease; background-color: green;}
#box3 {animation-timing-function: ease-in; background-color: red;}
#box4 {animation-timing-function: ease-out;background-color: pink ;}
#box5 {animation-timing-function: ease-in-out; background-color: blue;}
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
/* Standard syntax */
@keyframes mymove {
from {left: 0px;}
to {left: 300px;}
}
Note: The animation-timing-funtion property is supported by latest version of all the browsers and not supproted in Internet Explorer 9 and earlier versions.
0 Comment(s)