1ease = starts slow , speeds in middle and slow again in the end.
2ease-in = slow in the beginning , speeds up in the end.
3ease-out = speeds in the beginning, slow in the end.
4linear = as the name suggest, i.e. constant speed throughout the animation.
5
6
7ease-in-out = starts slow, fastest in the middle , slow again in the end.
8
9
10
11DIFFERENCE BETWEEN EASE & EASE-IN-OUT :
12
13ease is like ease-in-out , but in ease the starting time of speeding
14is less than the starting time of speeding in ease-in-out.
15That means in ease the animation will start speeding before the animation
16speeds in ease-in-out.
1<!DOCTYPE html>
2<html>
3<head>
4<style>
5div {
6 width: 100px;
7 height: 50px;
8 background: red;
9 color: white;
10 font-weight: bold;
11 position: relative;
12 animation: mymove 5s infinite;
13 animation-direction: alternate-reverse;
14}
15
16#div1 {animation-timing-function: linear;}
17#div2 {animation-timing-function: ease;}
18#div3 {animation-timing-function: ease-in;}
19#div4 {animation-timing-function: ease-out;}
20#div5 {animation-timing-function: ease-in-out;}
21
22@keyframes mymove {
23 from {left: 0px;}
24 to {left: 300px;}
25}
26</style>
27</head>
28<body>
29
30<p><strong>Note:</strong> The animation-timing-funtion property is not supported in Internet Explorer 9 and earlier versions.</p>
31<div id="div1">linear</div>
32<div id="div2">ease</div>
33<div id="div3">ease-in</div>
34<div id="div4">ease-out</div>
35<div id="div5">ease-in-out</div>
36
37</body>
38</html>
39
1ease = starts slow , speeds in middle and slow again in the end.
2ease-in = slow in the beginning , speeds up in the end.
3ease-out = speeds in the beginning, slow in the end.
4linear = as the name suggest, i.e. constant speed throughout the animation.
5
6
7ease-in-out = starts slow, fastest in the middle , slow again in the end.
8
9
10
11DIFFERENCE BETWEEN EASE & EASE-IN-OUT