A07 ·
Custom Easing with Sass
patakk is an insanely talented GIF artist and on his tumblr blog he shared this simple yet amazing easing function:
The time variable goes from 0 to 1 and g adjusts the amount of easing.
x = 300 * ease(time, g);
float ease(float p, float g){
if (p < 0.5)
return 0.5 * pow(2*p, g);
else
return 1 - 0.5 * pow(2*(1 - p), g);
}3D animation has this concept of baking an animation. The same idea can be extended to baking an easing effect with Sass. The easingGenerator generates keyframe animations using this custom easing function.
@function ease($time, $g) {
@if $time < 50 {
@return 0.5 * pow(2 * $time/100, $g);
} @else {
@return 1 - (0.5 * pow(2 * (1 - $time/100), $g));
}
}
@mixin easingGenerator($g) {
@for $i from 0 through 100 {
// calculate
$percent: 0% + $i;
$left: 0% + 100 * ease($i, $g);
// set position
#{$percent} {
left: $left;
}
}
}<h2>SASS Mixin for Generating a Custom Easing Function</h2>
<div class="ball-container">
<p>g = 1</p>
<div class="ball g-1"></div>
</div>
<div class="ball-container">
<p>g = 2</p>
<div class="ball g-2"></div>
</div>
<div class="ball-container">
<p>g = 4</p>
<div class="ball g-4"></div>
</div>
<div class="ball-container">
<p>g = 8</p>
<div class="ball g-8"></div>
</div>
<p class="padded ref"><a href="https://patakk.tumblr.com/post/88602945835/heres-a-simple-function-you-can-use-for-easing">» patakk.tumblr.com</a></p>
<blockquote>
<p class="padded">Here’s a simple function you can use for easing motions, just set your “time” variable to go from 0 to 1.</p>
<p class="padded">The ‘g’ adjusts the amount of easing.</p>
<p class="padded">In the animation above I used the function like this:</p>
<pre class="padded">
x = 300 * ease(time, g);
float ease(float p, float g){
if (p < 0.5)
return 0.5 * pow(2*p, g);
else
return 1 - 0.5 * pow(2*(1 - p), g);
}
<pre>
</blockquote>/* ---------------------------------
Mixins
--------------------------------- */
/* ---------------------------------
Math Power Function for SASS
From:
https://github.com/adambom/Sass-Math/blob/master/math.scss
--------------------------------- */
/* ---------------------------------
The Custom Easing Function
from:
https://patakk.tumblr.com/post/88602945835/heres-a-simple-function-you-can-use-for-easing
--------------------------------- */
/* ---------------------------------
Generate keyframes based
on easing function
--------------------------------- */
/* ---------------------------------
Main
--------------------------------- */
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
color: #1E4C6B;
margin: 40px 0 0 0;
padding: 0;
}
h2 {
font-family: sans-serif;
padding: 0 25px;
margin-bottom: 60px;
}
a {
color: #21B46E;
text-decoration: none;
font-weight: bold;
font-family: sans-serif;
}
blockquote {
border-left: 4px solid #1E758D;
}
.padded {
padding: 0 25px;
}
.ref {
margin-top: 60px;
}
.ball-container {
width: 100%;
padding: 0 10%;
margin-bottom: 20px;
}
.ball-container p {
margin-top: 0;
font-style: italic;
}
.ball-container .ball {
position: relative;
display: inline-block;
width: 25px;
height: 25px;
background-color: #FF4C70;
border-radius: 12.5px;
left: 0%;
-webkit-transform: translate3d(0px, 0px, 0px);
-moz-transform: translate3d(0px, 0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.ball-container .ball.g-1 {
-webkit-animation: move-1 5s infinite 2s;
-moz-animation: move-1 5s infinite 2s;
-o-animation: move-1 5s infinite 2s;
animation: move-1 5s infinite 2s;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.ball-container .ball.g-2 {
-webkit-animation: move-2 5s infinite 2s;
-moz-animation: move-2 5s infinite 2s;
-o-animation: move-2 5s infinite 2s;
animation: move-2 5s infinite 2s;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.ball-container .ball.g-4 {
-webkit-animation: move-4 5s infinite 2s;
-moz-animation: move-4 5s infinite 2s;
-o-animation: move-4 5s infinite 2s;
animation: move-4 5s infinite 2s;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.ball-container .ball.g-8 {
-webkit-animation: move-8 5s infinite 2s;
-moz-animation: move-8 5s infinite 2s;
-o-animation: move-8 5s infinite 2s;
animation: move-8 5s infinite 2s;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
@-webkit-keyframes move-1 {
0% {
left: 0%;
}
1% {
left: 1%;
}
2% {
left: 2%;
}
3% {
left: 3%;
}
4% {
left: 4%;
}
5% {
left: 5%;
}
6% {
left: 6%;
}
7% {
left: 7%;
}
8% {
left: 8%;
}
9% {
left: 9%;
}
10% {
left: 10%;
}
11% {
left: 11%;
}
12% {
left: 12%;
}
13% {
left: 13%;
}
14% {
left: 14%;
}
15% {
left: 15%;
}
16% {
left: 16%;
}
17% {
left: 17%;
}
18% {
left: 18%;
}
19% {
left: 19%;
}
20% {
left: 20%;
}
21% {
left: 21%;
}
22% {
left: 22%;
}
23% {
left: 23%;
}
24% {
left: 24%;
}
25% {
left: 25%;
}
26% {
left: 26%;
}
27% {
left: 27%;
}
28% {
left: 28%;
}
29% {
left: 29%;
}
30% {
left: 30%;
}
31% {
left: 31%;
}
32% {
left: 32%;
}
33% {
left: 33%;
}
34% {
left: 34%;
}
35% {
left: 35%;
}
36% {
left: 36%;
}
37% {
left: 37%;
}
38% {
left: 38%;
}
39% {
left: 39%;
}
40% {
left: 40%;
}
41% {
left: 41%;
}
42% {
left: 42%;
}
43% {
left: 43%;
}
44% {
left: 44%;
}
45% {
left: 45%;
}
46% {
left: 46%;
}
47% {
left: 47%;
}
48% {
left: 48%;
}
49% {
left: 49%;
}
50% {
left: 50%;
}
51% {
left: 51%;
}
52% {
left: 52%;
}
53% {
left: 53%;
}
54% {
left: 54%;
}
55% {
left: 55%;
}
56% {
left: 56%;
}
57% {
left: 57%;
}
58% {
left: 58%;
}
59% {
left: 59%;
}
60% {
left: 60%;
}
61% {
left: 61%;
}
62% {
left: 62%;
}
63% {
left: 63%;
}
64% {
left: 64%;
}
65% {
left: 65%;
}
66% {
left: 66%;
}
67% {
left: 67%;
}
68% {
left: 68%;
}
69% {
left: 69%;
}
70% {
left: 70%;
}
71% {
left: 71%;
}
72% {
left: 72%;
}
73% {
left: 73%;
}
74% {
left: 74%;
}
75% {
left: 75%;
}
76% {
left: 76%;
}
77% {
left: 77%;
}
78% {
left: 78%;
}
79% {
left: 79%;
}
80% {
left: 80%;
}
81% {
left: 81%;
}
82% {
left: 82%;
}
83% {
left: 83%;
}
84% {
left: 84%;
}
85% {
left: 85%;
}
86% {
left: 86%;
}
87% {
left: 87%;
}
88% {
left: 88%;
}
89% {
left: 89%;
}
90% {
left: 90%;
}
91% {
left: 91%;
}
92% {
left: 92%;
}
93% {
left: 93%;
}
94% {
left: 94%;
}
95% {
left: 95%;
}
96% {
left: 96%;
}
97% {
left: 97%;
}
98% {
left: 98%;
}
99% {
left: 99%;
}
100% {
left: 100%;
}
}
@-moz-keyframes move-1 {
0% {
left: 0%;
}
1% {
left: 1%;
}
2% {
left: 2%;
}
3% {
left: 3%;
}
4% {
left: 4%;
}
5% {
left: 5%;
}
6% {
left: 6%;
}
7% {
left: 7%;
}
8% {
left: 8%;
}
9% {
left: 9%;
}
10% {
left: 10%;
}
11% {
left: 11%;
}
12% {
left: 12%;
}
13% {
left: 13%;
}
14% {
left: 14%;
}
15% {
left: 15%;
}
16% {
left: 16%;
}
17% {
left: 17%;
}
18% {
left: 18%;
}
19% {
left: 19%;
}
20% {
left: 20%;
}
21% {
left: 21%;
}
22% {
left: 22%;
}
23% {
left: 23%;
}
24% {
left: 24%;
}
25% {
left: 25%;
}
26% {
left: 26%;
}
27% {
left: 27%;
}
28% {
left: 28%;
}
29% {
left: 29%;
}
30% {
left: 30%;
}
31% {
left: 31%;
}
32% {
left: 32%;
}
33% {
left: 33%;
}
34% {
left: 34%;
}
35% {
left: 35%;
}
36% {
left: 36%;
}
37% {
left: 37%;
}
38% {
left: 38%;
}
39% {
left: 39%;
}
40% {
left: 40%;
}
41% {
left: 41%;
}
42% {
left: 42%;
}
43% {
left: 43%;
}
44% {
left: 44%;
}
45% {
left: 45%;
}
46% {
left: 46%;
}
47% {
left: 47%;
}
48% {
left: 48%;
}
49% {
left: 49%;
}
50% {
left: 50%;
}
51% {
left: 51%;
}
52% {
left: 52%;
}
53% {
left: 53%;
}
54% {
left: 54%;
}
55% {
left: 55%;
}
56% {
left: 56%;
}
57% {
left: 57%;
}
58% {
left: 58%;
}
59% {
left: 59%;
}
60% {
left: 60%;
}
61% {
left: 61%;
}
62% {
left: 62%;
}
63% {
left: 63%;
}
64% {
left: 64%;
}
65% {
left: 65%;
}
66% {
left: 66%;
}
67% {
left: 67%;
}
68% {
left: 68%;
}
69% {
left: 69%;
}
70% {
left: 70%;
}
71% {
left: 71%;
}
72% {
left: 72%;
}
73% {
left: 73%;
}
74% {
left: 74%;
}
75% {
left: 75%;
}
76% {
left: 76%;
}
77% {
left: 77%;
}
78% {
left: 78%;
}
79% {
left: 79%;
}
80% {
left: 80%;
}
81% {
left: 81%;
}
82% {
left: 82%;
}
83% {
left: 83%;
}
84% {
left: 84%;
}
85% {
left: 85%;
}
86% {
left: 86%;
}
87% {
left: 87%;
}
88% {
left: 88%;
}
89% {
left: 89%;
}
90% {
left: 90%;
}
91% {
left: 91%;
}
92% {
left: 92%;
}
93% {
left: 93%;
}
94% {
left: 94%;
}
95% {
left: 95%;
}
96% {
left: 96%;
}
97% {
left: 97%;
}
98% {
left: 98%;
}
99% {
left: 99%;
}
100% {
left: 100%;
}
}
@-ms-keyframes move-1 {
0% {
left: 0%;
}
1% {
left: 1%;
}
2% {
left: 2%;
}
3% {
left: 3%;
}
4% {
left: 4%;
}
5% {
left: 5%;
}
6% {
left: 6%;
}
7% {
left: 7%;
}
8% {
left: 8%;
}
9% {
left: 9%;
}
10% {
left: 10%;
}
11% {
left: 11%;
}
12% {
left: 12%;
}
13% {
left: 13%;
}
14% {
left: 14%;
}
15% {
left: 15%;
}
16% {
left: 16%;
}
17% {
left: 17%;
}
18% {
left: 18%;
}
19% {
left: 19%;
}
20% {
left: 20%;
}
21% {
left: 21%;
}
22% {
left: 22%;
}
23% {
left: 23%;
}
24% {
left: 24%;
}
25% {
left: 25%;
}
26% {
left: 26%;
}
27% {
left: 27%;
}
28% {
left: 28%;
}
29% {
left: 29%;
}
30% {
left: 30%;
}
31% {
left: 31%;
}
32% {
left: 32%;
}
33% {
left: 33%;
}
34% {
left: 34%;
}
35% {
left: 35%;
}
36% {
left: 36%;
}
37% {
left: 37%;
}
38% {
left: 38%;
}
39% {
left: 39%;
}
40% {
left: 40%;
}
41% {
left: 41%;
}
42% {
left: 42%;
}
43% {
left: 43%;
}
44% {
left: 44%;
}
45% {
left: 45%;
}
46% {
left: 46%;
}
47% {
left: 47%;
}
48% {
left: 48%;
}
49% {
left: 49%;
}
50% {
left: 50%;
}
51% {
left: 51%;
}
52% {
left: 52%;
}
53% {
left: 53%;
}
54% {
left: 54%;
}
55% {
left: 55%;
}
56% {
left: 56%;
}
57% {
left: 57%;
}
58% {
left: 58%;
}
59% {
left: 59%;
}
60% {
left: 60%;
}
61% {
left: 61%;
}
62% {
left: 62%;
}
63% {
left: 63%;
}
64% {
left: 64%;
}
65% {
left: 65%;
}
66% {
left: 66%;
}
67% {
left: 67%;
}
68% {
left: 68%;
}
69% {
left: 69%;
}
70% {
left: 70%;
}
71% {
left: 71%;
}
72% {
left: 72%;
}
73% {
left: 73%;
}
74% {
left: 74%;
}
75% {
left: 75%;
}
76% {
left: 76%;
}
77% {
left: 77%;
}
78% {
left: 78%;
}
79% {
left: 79%;
}
80% {
left: 80%;
}
81% {
left: 81%;
}
82% {
left: 82%;
}
83% {
left: 83%;
}
84% {
left: 84%;
}
85% {
left: 85%;
}
86% {
left: 86%;
}
87% {
left: 87%;
}
88% {
left: 88%;
}
89% {
left: 89%;
}
90% {
left: 90%;
}
91% {
left: 91%;
}
92% {
left: 92%;
}
93% {
left: 93%;
}
94% {
left: 94%;
}
95% {
left: 95%;
}
96% {
left: 96%;
}
97% {
left: 97%;
}
98% {
left: 98%;
}
99% {
left: 99%;
}
100% {
left: 100%;
}
}
@keyframes move-1 {
0% {
left: 0%;
}
1% {
left: 1%;
}
2% {
left: 2%;
}
3% {
left: 3%;
}
4% {
left: 4%;
}
5% {
left: 5%;
}
6% {
left: 6%;
}
7% {
left: 7%;
}
8% {
left: 8%;
}
9% {
left: 9%;
}
10% {
left: 10%;
}
11% {
left: 11%;
}
12% {
left: 12%;
}
13% {
left: 13%;
}
14% {
left: 14%;
}
15% {
left: 15%;
}
16% {
left: 16%;
}
17% {
left: 17%;
}
18% {
left: 18%;
}
19% {
left: 19%;
}
20% {
left: 20%;
}
21% {
left: 21%;
}
22% {
left: 22%;
}
23% {
left: 23%;
}
24% {
left: 24%;
}
25% {
left: 25%;
}
26% {
left: 26%;
}
27% {
left: 27%;
}
28% {
left: 28%;
}
29% {
left: 29%;
}
30% {
left: 30%;
}
31% {
left: 31%;
}
32% {
left: 32%;
}
33% {
left: 33%;
}
34% {
left: 34%;
}
35% {
left: 35%;
}
36% {
left: 36%;
}
37% {
left: 37%;
}
38% {
left: 38%;
}
39% {
left: 39%;
}
40% {
left: 40%;
}
41% {
left: 41%;
}
42% {
left: 42%;
}
43% {
left: 43%;
}
44% {
left: 44%;
}
45% {
left: 45%;
}
46% {
left: 46%;
}
47% {
left: 47%;
}
48% {
left: 48%;
}
49% {
left: 49%;
}
50% {
left: 50%;
}
51% {
left: 51%;
}
52% {
left: 52%;
}
53% {
left: 53%;
}
54% {
left: 54%;
}
55% {
left: 55%;
}
56% {
left: 56%;
}
57% {
left: 57%;
}
58% {
left: 58%;
}
59% {
left: 59%;
}
60% {
left: 60%;
}
61% {
left: 61%;
}
62% {
left: 62%;
}
63% {
left: 63%;
}
64% {
left: 64%;
}
65% {
left: 65%;
}
66% {
left: 66%;
}
67% {
left: 67%;
}
68% {
left: 68%;
}
69% {
left: 69%;
}
70% {
left: 70%;
}
71% {
left: 71%;
}
72% {
left: 72%;
}
73% {
left: 73%;
}
74% {
left: 74%;
}
75% {
left: 75%;
}
76% {
left: 76%;
}
77% {
left: 77%;
}
78% {
left: 78%;
}
79% {
left: 79%;
}
80% {
left: 80%;
}
81% {
left: 81%;
}
82% {
left: 82%;
}
83% {
left: 83%;
}
84% {
left: 84%;
}
85% {
left: 85%;
}
86% {
left: 86%;
}
87% {
left: 87%;
}
88% {
left: 88%;
}
89% {
left: 89%;
}
90% {
left: 90%;
}
91% {
left: 91%;
}
92% {
left: 92%;
}
93% {
left: 93%;
}
94% {
left: 94%;
}
95% {
left: 95%;
}
96% {
left: 96%;
}
97% {
left: 97%;
}
98% {
left: 98%;
}
99% {
left: 99%;
}
100% {
left: 100%;
}
}
@-webkit-keyframes move-2 {
0% {
left: 0%;
}
1% {
left: 0.02%;
}
2% {
left: 0.08%;
}
3% {
left: 0.18%;
}
4% {
left: 0.32%;
}
5% {
left: 0.5%;
}
6% {
left: 0.72%;
}
7% {
left: 0.98%;
}
8% {
left: 1.28%;
}
9% {
left: 1.62%;
}
10% {
left: 2%;
}
11% {
left: 2.42%;
}
12% {
left: 2.88%;
}
13% {
left: 3.38%;
}
14% {
left: 3.92%;
}
15% {
left: 4.5%;
}
16% {
left: 5.12%;
}
17% {
left: 5.78%;
}
18% {
left: 6.48%;
}
19% {
left: 7.22%;
}
20% {
left: 8%;
}
21% {
left: 8.82%;
}
22% {
left: 9.68%;
}
23% {
left: 10.58%;
}
24% {
left: 11.52%;
}
25% {
left: 12.5%;
}
26% {
left: 13.52%;
}
27% {
left: 14.58%;
}
28% {
left: 15.68%;
}
29% {
left: 16.82%;
}
30% {
left: 18%;
}
31% {
left: 19.22%;
}
32% {
left: 20.48%;
}
33% {
left: 21.78%;
}
34% {
left: 23.12%;
}
35% {
left: 24.5%;
}
36% {
left: 25.92%;
}
37% {
left: 27.38%;
}
38% {
left: 28.88%;
}
39% {
left: 30.42%;
}
40% {
left: 32%;
}
41% {
left: 33.62%;
}
42% {
left: 35.28%;
}
43% {
left: 36.98%;
}
44% {
left: 38.72%;
}
45% {
left: 40.5%;
}
46% {
left: 42.32%;
}
47% {
left: 44.18%;
}
48% {
left: 46.08%;
}
49% {
left: 48.02%;
}
50% {
left: 50%;
}
51% {
left: 51.98%;
}
52% {
left: 53.92%;
}
53% {
left: 55.82%;
}
54% {
left: 57.68%;
}
55% {
left: 59.5%;
}
56% {
left: 61.28%;
}
57% {
left: 63.02%;
}
58% {
left: 64.72%;
}
59% {
left: 66.38%;
}
60% {
left: 68%;
}
61% {
left: 69.58%;
}
62% {
left: 71.12%;
}
63% {
left: 72.62%;
}
64% {
left: 74.08%;
}
65% {
left: 75.5%;
}
66% {
left: 76.88%;
}
67% {
left: 78.22%;
}
68% {
left: 79.52%;
}
69% {
left: 80.78%;
}
70% {
left: 82%;
}
71% {
left: 83.18%;
}
72% {
left: 84.32%;
}
73% {
left: 85.42%;
}
74% {
left: 86.48%;
}
75% {
left: 87.5%;
}
76% {
left: 88.48%;
}
77% {
left: 89.42%;
}
78% {
left: 90.32%;
}
79% {
left: 91.18%;
}
80% {
left: 92%;
}
81% {
left: 92.78%;
}
82% {
left: 93.52%;
}
83% {
left: 94.22%;
}
84% {
left: 94.88%;
}
85% {
left: 95.5%;
}
86% {
left: 96.08%;
}
87% {
left: 96.62%;
}
88% {
left: 97.12%;
}
89% {
left: 97.58%;
}
90% {
left: 98%;
}
91% {
left: 98.38%;
}
92% {
left: 98.72%;
}
93% {
left: 99.02%;
}
94% {
left: 99.28%;
}
95% {
left: 99.5%;
}
96% {
left: 99.68%;
}
97% {
left: 99.82%;
}
98% {
left: 99.92%;
}
99% {
left: 99.98%;
}
100% {
left: 100%;
}
}
@-moz-keyframes move-2 {
0% {
left: 0%;
}
1% {
left: 0.02%;
}
2% {
left: 0.08%;
}
3% {
left: 0.18%;
}
4% {
left: 0.32%;
}
5% {
left: 0.5%;
}
6% {
left: 0.72%;
}
7% {
left: 0.98%;
}
8% {
left: 1.28%;
}
9% {
left: 1.62%;
}
10% {
left: 2%;
}
11% {
left: 2.42%;
}
12% {
left: 2.88%;
}
13% {
left: 3.38%;
}
14% {
left: 3.92%;
}
15% {
left: 4.5%;
}
16% {
left: 5.12%;
}
17% {
left: 5.78%;
}
18% {
left: 6.48%;
}
19% {
left: 7.22%;
}
20% {
left: 8%;
}
21% {
left: 8.82%;
}
22% {
left: 9.68%;
}
23% {
left: 10.58%;
}
24% {
left: 11.52%;
}
25% {
left: 12.5%;
}
26% {
left: 13.52%;
}
27% {
left: 14.58%;
}
28% {
left: 15.68%;
}
29% {
left: 16.82%;
}
30% {
left: 18%;
}
31% {
left: 19.22%;
}
32% {
left: 20.48%;
}
33% {
left: 21.78%;
}
34% {
left: 23.12%;
}
35% {
left: 24.5%;
}
36% {
left: 25.92%;
}
37% {
left: 27.38%;
}
38% {
left: 28.88%;
}
39% {
left: 30.42%;
}
40% {
left: 32%;
}
41% {
left: 33.62%;
}
42% {
left: 35.28%;
}
43% {
left: 36.98%;
}
44% {
left: 38.72%;
}
45% {
left: 40.5%;
}
46% {
left: 42.32%;
}
47% {
left: 44.18%;
}
48% {
left: 46.08%;
}
49% {
left: 48.02%;
}
50% {
left: 50%;
}
51% {
left: 51.98%;
}
52% {
left: 53.92%;
}
53% {
left: 55.82%;
}
54% {
left: 57.68%;
}
55% {
left: 59.5%;
}
56% {
left: 61.28%;
}
57% {
left: 63.02%;
}
58% {
left: 64.72%;
}
59% {
left: 66.38%;
}
60% {
left: 68%;
}
61% {
left: 69.58%;
}
62% {
left: 71.12%;
}
63% {
left: 72.62%;
}
64% {
left: 74.08%;
}
65% {
left: 75.5%;
}
66% {
left: 76.88%;
}
67% {
left: 78.22%;
}
68% {
left: 79.52%;
}
69% {
left: 80.78%;
}
70% {
left: 82%;
}
71% {
left: 83.18%;
}
72% {
left: 84.32%;
}
73% {
left: 85.42%;
}
74% {
left: 86.48%;
}
75% {
left: 87.5%;
}
76% {
left: 88.48%;
}
77% {
left: 89.42%;
}
78% {
left: 90.32%;
}
79% {
left: 91.18%;
}
80% {
left: 92%;
}
81% {
left: 92.78%;
}
82% {
left: 93.52%;
}
83% {
left: 94.22%;
}
84% {
left: 94.88%;
}
85% {
left: 95.5%;
}
86% {
left: 96.08%;
}
87% {
left: 96.62%;
}
88% {
left: 97.12%;
}
89% {
left: 97.58%;
}
90% {
left: 98%;
}
91% {
left: 98.38%;
}
92% {
left: 98.72%;
}
93% {
left: 99.02%;
}
94% {
left: 99.28%;
}
95% {
left: 99.5%;
}
96% {
left: 99.68%;
}
97% {
left: 99.82%;
}
98% {
left: 99.92%;
}
99% {
left: 99.98%;
}
100% {
left: 100%;
}
}
@-ms-keyframes move-2 {
0% {
left: 0%;
}
1% {
left: 0.02%;
}
2% {
left: 0.08%;
}
3% {
left: 0.18%;
}
4% {
left: 0.32%;
}
5% {
left: 0.5%;
}
6% {
left: 0.72%;
}
7% {
left: 0.98%;
}
8% {
left: 1.28%;
}
9% {
left: 1.62%;
}
10% {
left: 2%;
}
11% {
left: 2.42%;
}
12% {
left: 2.88%;
}
13% {
left: 3.38%;
}
14% {
left: 3.92%;
}
15% {
left: 4.5%;
}
16% {
left: 5.12%;
}
17% {
left: 5.78%;
}
18% {
left: 6.48%;
}
19% {
left: 7.22%;
}
20% {
left: 8%;
}
21% {
left: 8.82%;
}
22% {
left: 9.68%;
}
23% {
left: 10.58%;
}
24% {
left: 11.52%;
}
25% {
left: 12.5%;
}
26% {
left: 13.52%;
}
27% {
left: 14.58%;
}
28% {
left: 15.68%;
}
29% {
left: 16.82%;
}
30% {
left: 18%;
}
31% {
left: 19.22%;
}
32% {
left: 20.48%;
}
33% {
left: 21.78%;
}
34% {
left: 23.12%;
}
35% {
left: 24.5%;
}
36% {
left: 25.92%;
}
37% {
left: 27.38%;
}
38% {
left: 28.88%;
}
39% {
left: 30.42%;
}
40% {
left: 32%;
}
41% {
left: 33.62%;
}
42% {
left: 35.28%;
}
43% {
left: 36.98%;
}
44% {
left: 38.72%;
}
45% {
left: 40.5%;
}
46% {
left: 42.32%;
}
47% {
left: 44.18%;
}
48% {
left: 46.08%;
}
49% {
left: 48.02%;
}
50% {
left: 50%;
}
51% {
left: 51.98%;
}
52% {
left: 53.92%;
}
53% {
left: 55.82%;
}
54% {
left: 57.68%;
}
55% {
left: 59.5%;
}
56% {
left: 61.28%;
}
57% {
left: 63.02%;
}
58% {
left: 64.72%;
}
59% {
left: 66.38%;
}
60% {
left: 68%;
}
61% {
left: 69.58%;
}
62% {
left: 71.12%;
}
63% {
left: 72.62%;
}
64% {
left: 74.08%;
}
65% {
left: 75.5%;
}
66% {
left: 76.88%;
}
67% {
left: 78.22%;
}
68% {
left: 79.52%;
}
69% {
left: 80.78%;
}
70% {
left: 82%;
}
71% {
left: 83.18%;
}
72% {
left: 84.32%;
}
73% {
left: 85.42%;
}
74% {
left: 86.48%;
}
75% {
left: 87.5%;
}
76% {
left: 88.48%;
}
77% {
left: 89.42%;
}
78% {
left: 90.32%;
}
79% {
left: 91.18%;
}
80% {
left: 92%;
}
81% {
left: 92.78%;
}
82% {
left: 93.52%;
}
83% {
left: 94.22%;
}
84% {
left: 94.88%;
}
85% {
left: 95.5%;
}
86% {
left: 96.08%;
}
87% {
left: 96.62%;
}
88% {
left: 97.12%;
}
89% {
left: 97.58%;
}
90% {
left: 98%;
}
91% {
left: 98.38%;
}
92% {
left: 98.72%;
}
93% {
left: 99.02%;
}
94% {
left: 99.28%;
}
95% {
left: 99.5%;
}
96% {
left: 99.68%;
}
97% {
left: 99.82%;
}
98% {
left: 99.92%;
}
99% {
left: 99.98%;
}
100% {
left: 100%;
}
}
@keyframes move-2 {
0% {
left: 0%;
}
1% {
left: 0.02%;
}
2% {
left: 0.08%;
}
3% {
left: 0.18%;
}
4% {
left: 0.32%;
}
5% {
left: 0.5%;
}
6% {
left: 0.72%;
}
7% {
left: 0.98%;
}
8% {
left: 1.28%;
}
9% {
left: 1.62%;
}
10% {
left: 2%;
}
11% {
left: 2.42%;
}
12% {
left: 2.88%;
}
13% {
left: 3.38%;
}
14% {
left: 3.92%;
}
15% {
left: 4.5%;
}
16% {
left: 5.12%;
}
17% {
left: 5.78%;
}
18% {
left: 6.48%;
}
19% {
left: 7.22%;
}
20% {
left: 8%;
}
21% {
left: 8.82%;
}
22% {
left: 9.68%;
}
23% {
left: 10.58%;
}
24% {
left: 11.52%;
}
25% {
left: 12.5%;
}
26% {
left: 13.52%;
}
27% {
left: 14.58%;
}
28% {
left: 15.68%;
}
29% {
left: 16.82%;
}
30% {
left: 18%;
}
31% {
left: 19.22%;
}
32% {
left: 20.48%;
}
33% {
left: 21.78%;
}
34% {
left: 23.12%;
}
35% {
left: 24.5%;
}
36% {
left: 25.92%;
}
37% {
left: 27.38%;
}
38% {
left: 28.88%;
}
39% {
left: 30.42%;
}
40% {
left: 32%;
}
41% {
left: 33.62%;
}
42% {
left: 35.28%;
}
43% {
left: 36.98%;
}
44% {
left: 38.72%;
}
45% {
left: 40.5%;
}
46% {
left: 42.32%;
}
47% {
left: 44.18%;
}
48% {
left: 46.08%;
}
49% {
left: 48.02%;
}
50% {
left: 50%;
}
51% {
left: 51.98%;
}
52% {
left: 53.92%;
}
53% {
left: 55.82%;
}
54% {
left: 57.68%;
}
55% {
left: 59.5%;
}
56% {
left: 61.28%;
}
57% {
left: 63.02%;
}
58% {
left: 64.72%;
}
59% {
left: 66.38%;
}
60% {
left: 68%;
}
61% {
left: 69.58%;
}
62% {
left: 71.12%;
}
63% {
left: 72.62%;
}
64% {
left: 74.08%;
}
65% {
left: 75.5%;
}
66% {
left: 76.88%;
}
67% {
left: 78.22%;
}
68% {
left: 79.52%;
}
69% {
left: 80.78%;
}
70% {
left: 82%;
}
71% {
left: 83.18%;
}
72% {
left: 84.32%;
}
73% {
left: 85.42%;
}
74% {
left: 86.48%;
}
75% {
left: 87.5%;
}
76% {
left: 88.48%;
}
77% {
left: 89.42%;
}
78% {
left: 90.32%;
}
79% {
left: 91.18%;
}
80% {
left: 92%;
}
81% {
left: 92.78%;
}
82% {
left: 93.52%;
}
83% {
left: 94.22%;
}
84% {
left: 94.88%;
}
85% {
left: 95.5%;
}
86% {
left: 96.08%;
}
87% {
left: 96.62%;
}
88% {
left: 97.12%;
}
89% {
left: 97.58%;
}
90% {
left: 98%;
}
91% {
left: 98.38%;
}
92% {
left: 98.72%;
}
93% {
left: 99.02%;
}
94% {
left: 99.28%;
}
95% {
left: 99.5%;
}
96% {
left: 99.68%;
}
97% {
left: 99.82%;
}
98% {
left: 99.92%;
}
99% {
left: 99.98%;
}
100% {
left: 100%;
}
}
@-webkit-keyframes move-4 {
0% {
left: 0%;
}
1% {
left: 0.000008%;
}
2% {
left: 0.000128%;
}
3% {
left: 0.000648%;
}
4% {
left: 0.002048%;
}
5% {
left: 0.005%;
}
6% {
left: 0.010368%;
}
7% {
left: 0.019208%;
}
8% {
left: 0.032768%;
}
9% {
left: 0.052488%;
}
10% {
left: 0.08%;
}
11% {
left: 0.117128%;
}
12% {
left: 0.165888%;
}
13% {
left: 0.228488%;
}
14% {
left: 0.307328%;
}
15% {
left: 0.405%;
}
16% {
left: 0.524288%;
}
17% {
left: 0.668168%;
}
18% {
left: 0.839808%;
}
19% {
left: 1.042568%;
}
20% {
left: 1.28%;
}
21% {
left: 1.555848%;
}
22% {
left: 1.874048%;
}
23% {
left: 2.238728%;
}
24% {
left: 2.654208%;
}
25% {
left: 3.125%;
}
26% {
left: 3.655808%;
}
27% {
left: 4.251528%;
}
28% {
left: 4.917248%;
}
29% {
left: 5.658248%;
}
30% {
left: 6.48%;
}
31% {
left: 7.388168%;
}
32% {
left: 8.388608%;
}
33% {
left: 9.487368%;
}
34% {
left: 10.690688%;
}
35% {
left: 12.005%;
}
36% {
left: 13.436928%;
}
37% {
left: 14.993288%;
}
38% {
left: 16.681088%;
}
39% {
left: 18.507528%;
}
40% {
left: 20.48%;
}
41% {
left: 22.606088%;
}
42% {
left: 24.893568%;
}
43% {
left: 27.350408%;
}
44% {
left: 29.984768%;
}
45% {
left: 32.805%;
}
46% {
left: 35.819648%;
}
47% {
left: 39.037448%;
}
48% {
left: 42.467328%;
}
49% {
left: 46.118408%;
}
50% {
left: 50%;
}
51% {
left: 53.881592%;
}
52% {
left: 57.532672%;
}
53% {
left: 60.962552%;
}
54% {
left: 64.180352%;
}
55% {
left: 67.195%;
}
56% {
left: 70.015232%;
}
57% {
left: 72.649592%;
}
58% {
left: 75.106432%;
}
59% {
left: 77.393912%;
}
60% {
left: 79.52%;
}
61% {
left: 81.492472%;
}
62% {
left: 83.318912%;
}
63% {
left: 85.006712%;
}
64% {
left: 86.563072%;
}
65% {
left: 87.995%;
}
66% {
left: 89.309312%;
}
67% {
left: 90.512632%;
}
68% {
left: 91.611392%;
}
69% {
left: 92.611832%;
}
70% {
left: 93.52%;
}
71% {
left: 94.341752%;
}
72% {
left: 95.082752%;
}
73% {
left: 95.748472%;
}
74% {
left: 96.344192%;
}
75% {
left: 96.875%;
}
76% {
left: 97.345792%;
}
77% {
left: 97.761272%;
}
78% {
left: 98.125952%;
}
79% {
left: 98.444152%;
}
80% {
left: 98.72%;
}
81% {
left: 98.957432%;
}
82% {
left: 99.160192%;
}
83% {
left: 99.331832%;
}
84% {
left: 99.475712%;
}
85% {
left: 99.595%;
}
86% {
left: 99.692672%;
}
87% {
left: 99.771512%;
}
88% {
left: 99.834112%;
}
89% {
left: 99.882872%;
}
90% {
left: 99.92%;
}
91% {
left: 99.947512%;
}
92% {
left: 99.967232%;
}
93% {
left: 99.980792%;
}
94% {
left: 99.989632%;
}
95% {
left: 99.995%;
}
96% {
left: 99.997952%;
}
97% {
left: 99.999352%;
}
98% {
left: 99.999872%;
}
99% {
left: 99.999992%;
}
100% {
left: 100%;
}
}
@-moz-keyframes move-4 {
0% {
left: 0%;
}
1% {
left: 0.000008%;
}
2% {
left: 0.000128%;
}
3% {
left: 0.000648%;
}
4% {
left: 0.002048%;
}
5% {
left: 0.005%;
}
6% {
left: 0.010368%;
}
7% {
left: 0.019208%;
}
8% {
left: 0.032768%;
}
9% {
left: 0.052488%;
}
10% {
left: 0.08%;
}
11% {
left: 0.117128%;
}
12% {
left: 0.165888%;
}
13% {
left: 0.228488%;
}
14% {
left: 0.307328%;
}
15% {
left: 0.405%;
}
16% {
left: 0.524288%;
}
17% {
left: 0.668168%;
}
18% {
left: 0.839808%;
}
19% {
left: 1.042568%;
}
20% {
left: 1.28%;
}
21% {
left: 1.555848%;
}
22% {
left: 1.874048%;
}
23% {
left: 2.238728%;
}
24% {
left: 2.654208%;
}
25% {
left: 3.125%;
}
26% {
left: 3.655808%;
}
27% {
left: 4.251528%;
}
28% {
left: 4.917248%;
}
29% {
left: 5.658248%;
}
30% {
left: 6.48%;
}
31% {
left: 7.388168%;
}
32% {
left: 8.388608%;
}
33% {
left: 9.487368%;
}
34% {
left: 10.690688%;
}
35% {
left: 12.005%;
}
36% {
left: 13.436928%;
}
37% {
left: 14.993288%;
}
38% {
left: 16.681088%;
}
39% {
left: 18.507528%;
}
40% {
left: 20.48%;
}
41% {
left: 22.606088%;
}
42% {
left: 24.893568%;
}
43% {
left: 27.350408%;
}
44% {
left: 29.984768%;
}
45% {
left: 32.805%;
}
46% {
left: 35.819648%;
}
47% {
left: 39.037448%;
}
48% {
left: 42.467328%;
}
49% {
left: 46.118408%;
}
50% {
left: 50%;
}
51% {
left: 53.881592%;
}
52% {
left: 57.532672%;
}
53% {
left: 60.962552%;
}
54% {
left: 64.180352%;
}
55% {
left: 67.195%;
}
56% {
left: 70.015232%;
}
57% {
left: 72.649592%;
}
58% {
left: 75.106432%;
}
59% {
left: 77.393912%;
}
60% {
left: 79.52%;
}
61% {
left: 81.492472%;
}
62% {
left: 83.318912%;
}
63% {
left: 85.006712%;
}
64% {
left: 86.563072%;
}
65% {
left: 87.995%;
}
66% {
left: 89.309312%;
}
67% {
left: 90.512632%;
}
68% {
left: 91.611392%;
}
69% {
left: 92.611832%;
}
70% {
left: 93.52%;
}
71% {
left: 94.341752%;
}
72% {
left: 95.082752%;
}
73% {
left: 95.748472%;
}
74% {
left: 96.344192%;
}
75% {
left: 96.875%;
}
76% {
left: 97.345792%;
}
77% {
left: 97.761272%;
}
78% {
left: 98.125952%;
}
79% {
left: 98.444152%;
}
80% {
left: 98.72%;
}
81% {
left: 98.957432%;
}
82% {
left: 99.160192%;
}
83% {
left: 99.331832%;
}
84% {
left: 99.475712%;
}
85% {
left: 99.595%;
}
86% {
left: 99.692672%;
}
87% {
left: 99.771512%;
}
88% {
left: 99.834112%;
}
89% {
left: 99.882872%;
}
90% {
left: 99.92%;
}
91% {
left: 99.947512%;
}
92% {
left: 99.967232%;
}
93% {
left: 99.980792%;
}
94% {
left: 99.989632%;
}
95% {
left: 99.995%;
}
96% {
left: 99.997952%;
}
97% {
left: 99.999352%;
}
98% {
left: 99.999872%;
}
99% {
left: 99.999992%;
}
100% {
left: 100%;
}
}
@-ms-keyframes move-4 {
0% {
left: 0%;
}
1% {
left: 0.000008%;
}
2% {
left: 0.000128%;
}
3% {
left: 0.000648%;
}
4% {
left: 0.002048%;
}
5% {
left: 0.005%;
}
6% {
left: 0.010368%;
}
7% {
left: 0.019208%;
}
8% {
left: 0.032768%;
}
9% {
left: 0.052488%;
}
10% {
left: 0.08%;
}
11% {
left: 0.117128%;
}
12% {
left: 0.165888%;
}
13% {
left: 0.228488%;
}
14% {
left: 0.307328%;
}
15% {
left: 0.405%;
}
16% {
left: 0.524288%;
}
17% {
left: 0.668168%;
}
18% {
left: 0.839808%;
}
19% {
left: 1.042568%;
}
20% {
left: 1.28%;
}
21% {
left: 1.555848%;
}
22% {
left: 1.874048%;
}
23% {
left: 2.238728%;
}
24% {
left: 2.654208%;
}
25% {
left: 3.125%;
}
26% {
left: 3.655808%;
}
27% {
left: 4.251528%;
}
28% {
left: 4.917248%;
}
29% {
left: 5.658248%;
}
30% {
left: 6.48%;
}
31% {
left: 7.388168%;
}
32% {
left: 8.388608%;
}
33% {
left: 9.487368%;
}
34% {
left: 10.690688%;
}
35% {
left: 12.005%;
}
36% {
left: 13.436928%;
}
37% {
left: 14.993288%;
}
38% {
left: 16.681088%;
}
39% {
left: 18.507528%;
}
40% {
left: 20.48%;
}
41% {
left: 22.606088%;
}
42% {
left: 24.893568%;
}
43% {
left: 27.350408%;
}
44% {
left: 29.984768%;
}
45% {
left: 32.805%;
}
46% {
left: 35.819648%;
}
47% {
left: 39.037448%;
}
48% {
left: 42.467328%;
}
49% {
left: 46.118408%;
}
50% {
left: 50%;
}
51% {
left: 53.881592%;
}
52% {
left: 57.532672%;
}
53% {
left: 60.962552%;
}
54% {
left: 64.180352%;
}
55% {
left: 67.195%;
}
56% {
left: 70.015232%;
}
57% {
left: 72.649592%;
}
58% {
left: 75.106432%;
}
59% {
left: 77.393912%;
}
60% {
left: 79.52%;
}
61% {
left: 81.492472%;
}
62% {
left: 83.318912%;
}
63% {
left: 85.006712%;
}
64% {
left: 86.563072%;
}
65% {
left: 87.995%;
}
66% {
left: 89.309312%;
}
67% {
left: 90.512632%;
}
68% {
left: 91.611392%;
}
69% {
left: 92.611832%;
}
70% {
left: 93.52%;
}
71% {
left: 94.341752%;
}
72% {
left: 95.082752%;
}
73% {
left: 95.748472%;
}
74% {
left: 96.344192%;
}
75% {
left: 96.875%;
}
76% {
left: 97.345792%;
}
77% {
left: 97.761272%;
}
78% {
left: 98.125952%;
}
79% {
left: 98.444152%;
}
80% {
left: 98.72%;
}
81% {
left: 98.957432%;
}
82% {
left: 99.160192%;
}
83% {
left: 99.331832%;
}
84% {
left: 99.475712%;
}
85% {
left: 99.595%;
}
86% {
left: 99.692672%;
}
87% {
left: 99.771512%;
}
88% {
left: 99.834112%;
}
89% {
left: 99.882872%;
}
90% {
left: 99.92%;
}
91% {
left: 99.947512%;
}
92% {
left: 99.967232%;
}
93% {
left: 99.980792%;
}
94% {
left: 99.989632%;
}
95% {
left: 99.995%;
}
96% {
left: 99.997952%;
}
97% {
left: 99.999352%;
}
98% {
left: 99.999872%;
}
99% {
left: 99.999992%;
}
100% {
left: 100%;
}
}
@keyframes move-4 {
0% {
left: 0%;
}
1% {
left: 0.000008%;
}
2% {
left: 0.000128%;
}
3% {
left: 0.000648%;
}
4% {
left: 0.002048%;
}
5% {
left: 0.005%;
}
6% {
left: 0.010368%;
}
7% {
left: 0.019208%;
}
8% {
left: 0.032768%;
}
9% {
left: 0.052488%;
}
10% {
left: 0.08%;
}
11% {
left: 0.117128%;
}
12% {
left: 0.165888%;
}
13% {
left: 0.228488%;
}
14% {
left: 0.307328%;
}
15% {
left: 0.405%;
}
16% {
left: 0.524288%;
}
17% {
left: 0.668168%;
}
18% {
left: 0.839808%;
}
19% {
left: 1.042568%;
}
20% {
left: 1.28%;
}
21% {
left: 1.555848%;
}
22% {
left: 1.874048%;
}
23% {
left: 2.238728%;
}
24% {
left: 2.654208%;
}
25% {
left: 3.125%;
}
26% {
left: 3.655808%;
}
27% {
left: 4.251528%;
}
28% {
left: 4.917248%;
}
29% {
left: 5.658248%;
}
30% {
left: 6.48%;
}
31% {
left: 7.388168%;
}
32% {
left: 8.388608%;
}
33% {
left: 9.487368%;
}
34% {
left: 10.690688%;
}
35% {
left: 12.005%;
}
36% {
left: 13.436928%;
}
37% {
left: 14.993288%;
}
38% {
left: 16.681088%;
}
39% {
left: 18.507528%;
}
40% {
left: 20.48%;
}
41% {
left: 22.606088%;
}
42% {
left: 24.893568%;
}
43% {
left: 27.350408%;
}
44% {
left: 29.984768%;
}
45% {
left: 32.805%;
}
46% {
left: 35.819648%;
}
47% {
left: 39.037448%;
}
48% {
left: 42.467328%;
}
49% {
left: 46.118408%;
}
50% {
left: 50%;
}
51% {
left: 53.881592%;
}
52% {
left: 57.532672%;
}
53% {
left: 60.962552%;
}
54% {
left: 64.180352%;
}
55% {
left: 67.195%;
}
56% {
left: 70.015232%;
}
57% {
left: 72.649592%;
}
58% {
left: 75.106432%;
}
59% {
left: 77.393912%;
}
60% {
left: 79.52%;
}
61% {
left: 81.492472%;
}
62% {
left: 83.318912%;
}
63% {
left: 85.006712%;
}
64% {
left: 86.563072%;
}
65% {
left: 87.995%;
}
66% {
left: 89.309312%;
}
67% {
left: 90.512632%;
}
68% {
left: 91.611392%;
}
69% {
left: 92.611832%;
}
70% {
left: 93.52%;
}
71% {
left: 94.341752%;
}
72% {
left: 95.082752%;
}
73% {
left: 95.748472%;
}
74% {
left: 96.344192%;
}
75% {
left: 96.875%;
}
76% {
left: 97.345792%;
}
77% {
left: 97.761272%;
}
78% {
left: 98.125952%;
}
79% {
left: 98.444152%;
}
80% {
left: 98.72%;
}
81% {
left: 98.957432%;
}
82% {
left: 99.160192%;
}
83% {
left: 99.331832%;
}
84% {
left: 99.475712%;
}
85% {
left: 99.595%;
}
86% {
left: 99.692672%;
}
87% {
left: 99.771512%;
}
88% {
left: 99.834112%;
}
89% {
left: 99.882872%;
}
90% {
left: 99.92%;
}
91% {
left: 99.947512%;
}
92% {
left: 99.967232%;
}
93% {
left: 99.980792%;
}
94% {
left: 99.989632%;
}
95% {
left: 99.995%;
}
96% {
left: 99.997952%;
}
97% {
left: 99.999352%;
}
98% {
left: 99.999872%;
}
99% {
left: 99.999992%;
}
100% {
left: 100%;
}
}
@-webkit-keyframes move-8 {
0% {
left: 0%;
}
1% {
left: 0%;
}
2% {
left: 0.0000000003%;
}
3% {
left: 0.0000000084%;
}
4% {
left: 0.0000000839%;
}
5% {
left: 0.0000005%;
}
6% {
left: 0.0000021499%;
}
7% {
left: 0.0000073789%;
}
8% {
left: 0.0000214748%;
}
9% {
left: 0.0000550998%;
}
10% {
left: 0.000128%;
}
11% {
left: 0.0002743794%;
}
12% {
left: 0.0005503766%;
}
13% {
left: 0.0010441353%;
}
14% {
left: 0.00188901%;
}
15% {
left: 0.0032805%;
}
16% {
left: 0.0054975581%;
}
17% {
left: 0.0089289695%;
}
18% {
left: 0.0141055495%;
}
19% {
left: 0.0217389607%;
}
20% {
left: 0.032768%;
}
21% {
left: 0.04841326%;
}
22% {
left: 0.0702411181%;
}
23% {
left: 0.1002380612%;
}
24% {
left: 0.1408964021%;
}
25% {
left: 0.1953125%;
}
26% {
left: 0.2672986427%;
}
27% {
left: 0.3615098067%;
}
28% {
left: 0.4835865579%;
}
29% {
left: 0.6403154086%;
}
30% {
left: 0.839808%;
}
31% {
left: 1.0917005279%;
}
32% {
left: 1.4073748836%;
}
33% {
left: 1.8002030313%;
}
34% {
left: 2.2858161983%;
}
35% {
left: 2.8824005%;
}
36% {
left: 3.6110206815%;
}
37% {
left: 4.495973701%;
}
38% {
left: 5.5651739373%;
}
39% {
left: 6.8505718534%;
}
40% {
left: 8.388608%;
}
41% {
left: 10.2207042933%;
}
42% {
left: 12.3937945554%;
}
43% {
left: 14.9608963553%;
}
44% {
left: 17.9817262403%;
}
45% {
left: 21.5233605%;
}
46% {
left: 25.6609436569%;
}
47% {
left: 30.4784469271%;
}
48% {
left: 36.0694789492%;
}
49% {
left: 42.5381511291%;
}
50% {
left: 50%;
}
51% {
left: 57.4618488709%;
}
52% {
left: 63.9305210508%;
}
53% {
left: 69.5215530729%;
}
54% {
left: 74.3390563431%;
}
55% {
left: 78.4766395%;
}
56% {
left: 82.0182737597%;
}
57% {
left: 85.0391036447%;
}
58% {
left: 87.6062054446%;
}
59% {
left: 89.7792957067%;
}
60% {
left: 91.611392%;
}
61% {
left: 93.1494281466%;
}
62% {
left: 94.4348260627%;
}
63% {
left: 95.504026299%;
}
64% {
left: 96.3889793185%;
}
65% {
left: 97.1175995%;
}
66% {
left: 97.7141838017%;
}
67% {
left: 98.1997969687%;
}
68% {
left: 98.5926251164%;
}
69% {
left: 98.9082994721%;
}
70% {
left: 99.160192%;
}
71% {
left: 99.3596845914%;
}
72% {
left: 99.5164134421%;
}
73% {
left: 99.6384901933%;
}
74% {
left: 99.7327013573%;
}
75% {
left: 99.8046875%;
}
76% {
left: 99.8591035979%;
}
77% {
left: 99.8997619388%;
}
78% {
left: 99.9297588819%;
}
79% {
left: 99.95158674%;
}
80% {
left: 99.967232%;
}
81% {
left: 99.9782610393%;
}
82% {
left: 99.9858944505%;
}
83% {
left: 99.9910710305%;
}
84% {
left: 99.9945024419%;
}
85% {
left: 99.9967195%;
}
86% {
left: 99.99811099%;
}
87% {
left: 99.9989558647%;
}
88% {
left: 99.9994496234%;
}
89% {
left: 99.9997256206%;
}
90% {
left: 99.999872%;
}
91% {
left: 99.9999449002%;
}
92% {
left: 99.9999785252%;
}
93% {
left: 99.9999926211%;
}
94% {
left: 99.9999978501%;
}
95% {
left: 99.9999995%;
}
96% {
left: 99.9999999161%;
}
97% {
left: 99.9999999916%;
}
98% {
left: 99.9999999997%;
}
99% {
left: 100%;
}
100% {
left: 100%;
}
}
@-moz-keyframes move-8 {
0% {
left: 0%;
}
1% {
left: 0%;
}
2% {
left: 0.0000000003%;
}
3% {
left: 0.0000000084%;
}
4% {
left: 0.0000000839%;
}
5% {
left: 0.0000005%;
}
6% {
left: 0.0000021499%;
}
7% {
left: 0.0000073789%;
}
8% {
left: 0.0000214748%;
}
9% {
left: 0.0000550998%;
}
10% {
left: 0.000128%;
}
11% {
left: 0.0002743794%;
}
12% {
left: 0.0005503766%;
}
13% {
left: 0.0010441353%;
}
14% {
left: 0.00188901%;
}
15% {
left: 0.0032805%;
}
16% {
left: 0.0054975581%;
}
17% {
left: 0.0089289695%;
}
18% {
left: 0.0141055495%;
}
19% {
left: 0.0217389607%;
}
20% {
left: 0.032768%;
}
21% {
left: 0.04841326%;
}
22% {
left: 0.0702411181%;
}
23% {
left: 0.1002380612%;
}
24% {
left: 0.1408964021%;
}
25% {
left: 0.1953125%;
}
26% {
left: 0.2672986427%;
}
27% {
left: 0.3615098067%;
}
28% {
left: 0.4835865579%;
}
29% {
left: 0.6403154086%;
}
30% {
left: 0.839808%;
}
31% {
left: 1.0917005279%;
}
32% {
left: 1.4073748836%;
}
33% {
left: 1.8002030313%;
}
34% {
left: 2.2858161983%;
}
35% {
left: 2.8824005%;
}
36% {
left: 3.6110206815%;
}
37% {
left: 4.495973701%;
}
38% {
left: 5.5651739373%;
}
39% {
left: 6.8505718534%;
}
40% {
left: 8.388608%;
}
41% {
left: 10.2207042933%;
}
42% {
left: 12.3937945554%;
}
43% {
left: 14.9608963553%;
}
44% {
left: 17.9817262403%;
}
45% {
left: 21.5233605%;
}
46% {
left: 25.6609436569%;
}
47% {
left: 30.4784469271%;
}
48% {
left: 36.0694789492%;
}
49% {
left: 42.5381511291%;
}
50% {
left: 50%;
}
51% {
left: 57.4618488709%;
}
52% {
left: 63.9305210508%;
}
53% {
left: 69.5215530729%;
}
54% {
left: 74.3390563431%;
}
55% {
left: 78.4766395%;
}
56% {
left: 82.0182737597%;
}
57% {
left: 85.0391036447%;
}
58% {
left: 87.6062054446%;
}
59% {
left: 89.7792957067%;
}
60% {
left: 91.611392%;
}
61% {
left: 93.1494281466%;
}
62% {
left: 94.4348260627%;
}
63% {
left: 95.504026299%;
}
64% {
left: 96.3889793185%;
}
65% {
left: 97.1175995%;
}
66% {
left: 97.7141838017%;
}
67% {
left: 98.1997969687%;
}
68% {
left: 98.5926251164%;
}
69% {
left: 98.9082994721%;
}
70% {
left: 99.160192%;
}
71% {
left: 99.3596845914%;
}
72% {
left: 99.5164134421%;
}
73% {
left: 99.6384901933%;
}
74% {
left: 99.7327013573%;
}
75% {
left: 99.8046875%;
}
76% {
left: 99.8591035979%;
}
77% {
left: 99.8997619388%;
}
78% {
left: 99.9297588819%;
}
79% {
left: 99.95158674%;
}
80% {
left: 99.967232%;
}
81% {
left: 99.9782610393%;
}
82% {
left: 99.9858944505%;
}
83% {
left: 99.9910710305%;
}
84% {
left: 99.9945024419%;
}
85% {
left: 99.9967195%;
}
86% {
left: 99.99811099%;
}
87% {
left: 99.9989558647%;
}
88% {
left: 99.9994496234%;
}
89% {
left: 99.9997256206%;
}
90% {
left: 99.999872%;
}
91% {
left: 99.9999449002%;
}
92% {
left: 99.9999785252%;
}
93% {
left: 99.9999926211%;
}
94% {
left: 99.9999978501%;
}
95% {
left: 99.9999995%;
}
96% {
left: 99.9999999161%;
}
97% {
left: 99.9999999916%;
}
98% {
left: 99.9999999997%;
}
99% {
left: 100%;
}
100% {
left: 100%;
}
}
@-ms-keyframes move-8 {
0% {
left: 0%;
}
1% {
left: 0%;
}
2% {
left: 0.0000000003%;
}
3% {
left: 0.0000000084%;
}
4% {
left: 0.0000000839%;
}
5% {
left: 0.0000005%;
}
6% {
left: 0.0000021499%;
}
7% {
left: 0.0000073789%;
}
8% {
left: 0.0000214748%;
}
9% {
left: 0.0000550998%;
}
10% {
left: 0.000128%;
}
11% {
left: 0.0002743794%;
}
12% {
left: 0.0005503766%;
}
13% {
left: 0.0010441353%;
}
14% {
left: 0.00188901%;
}
15% {
left: 0.0032805%;
}
16% {
left: 0.0054975581%;
}
17% {
left: 0.0089289695%;
}
18% {
left: 0.0141055495%;
}
19% {
left: 0.0217389607%;
}
20% {
left: 0.032768%;
}
21% {
left: 0.04841326%;
}
22% {
left: 0.0702411181%;
}
23% {
left: 0.1002380612%;
}
24% {
left: 0.1408964021%;
}
25% {
left: 0.1953125%;
}
26% {
left: 0.2672986427%;
}
27% {
left: 0.3615098067%;
}
28% {
left: 0.4835865579%;
}
29% {
left: 0.6403154086%;
}
30% {
left: 0.839808%;
}
31% {
left: 1.0917005279%;
}
32% {
left: 1.4073748836%;
}
33% {
left: 1.8002030313%;
}
34% {
left: 2.2858161983%;
}
35% {
left: 2.8824005%;
}
36% {
left: 3.6110206815%;
}
37% {
left: 4.495973701%;
}
38% {
left: 5.5651739373%;
}
39% {
left: 6.8505718534%;
}
40% {
left: 8.388608%;
}
41% {
left: 10.2207042933%;
}
42% {
left: 12.3937945554%;
}
43% {
left: 14.9608963553%;
}
44% {
left: 17.9817262403%;
}
45% {
left: 21.5233605%;
}
46% {
left: 25.6609436569%;
}
47% {
left: 30.4784469271%;
}
48% {
left: 36.0694789492%;
}
49% {
left: 42.5381511291%;
}
50% {
left: 50%;
}
51% {
left: 57.4618488709%;
}
52% {
left: 63.9305210508%;
}
53% {
left: 69.5215530729%;
}
54% {
left: 74.3390563431%;
}
55% {
left: 78.4766395%;
}
56% {
left: 82.0182737597%;
}
57% {
left: 85.0391036447%;
}
58% {
left: 87.6062054446%;
}
59% {
left: 89.7792957067%;
}
60% {
left: 91.611392%;
}
61% {
left: 93.1494281466%;
}
62% {
left: 94.4348260627%;
}
63% {
left: 95.504026299%;
}
64% {
left: 96.3889793185%;
}
65% {
left: 97.1175995%;
}
66% {
left: 97.7141838017%;
}
67% {
left: 98.1997969687%;
}
68% {
left: 98.5926251164%;
}
69% {
left: 98.9082994721%;
}
70% {
left: 99.160192%;
}
71% {
left: 99.3596845914%;
}
72% {
left: 99.5164134421%;
}
73% {
left: 99.6384901933%;
}
74% {
left: 99.7327013573%;
}
75% {
left: 99.8046875%;
}
76% {
left: 99.8591035979%;
}
77% {
left: 99.8997619388%;
}
78% {
left: 99.9297588819%;
}
79% {
left: 99.95158674%;
}
80% {
left: 99.967232%;
}
81% {
left: 99.9782610393%;
}
82% {
left: 99.9858944505%;
}
83% {
left: 99.9910710305%;
}
84% {
left: 99.9945024419%;
}
85% {
left: 99.9967195%;
}
86% {
left: 99.99811099%;
}
87% {
left: 99.9989558647%;
}
88% {
left: 99.9994496234%;
}
89% {
left: 99.9997256206%;
}
90% {
left: 99.999872%;
}
91% {
left: 99.9999449002%;
}
92% {
left: 99.9999785252%;
}
93% {
left: 99.9999926211%;
}
94% {
left: 99.9999978501%;
}
95% {
left: 99.9999995%;
}
96% {
left: 99.9999999161%;
}
97% {
left: 99.9999999916%;
}
98% {
left: 99.9999999997%;
}
99% {
left: 100%;
}
100% {
left: 100%;
}
}
@keyframes move-8 {
0% {
left: 0%;
}
1% {
left: 0%;
}
2% {
left: 0.0000000003%;
}
3% {
left: 0.0000000084%;
}
4% {
left: 0.0000000839%;
}
5% {
left: 0.0000005%;
}
6% {
left: 0.0000021499%;
}
7% {
left: 0.0000073789%;
}
8% {
left: 0.0000214748%;
}
9% {
left: 0.0000550998%;
}
10% {
left: 0.000128%;
}
11% {
left: 0.0002743794%;
}
12% {
left: 0.0005503766%;
}
13% {
left: 0.0010441353%;
}
14% {
left: 0.00188901%;
}
15% {
left: 0.0032805%;
}
16% {
left: 0.0054975581%;
}
17% {
left: 0.0089289695%;
}
18% {
left: 0.0141055495%;
}
19% {
left: 0.0217389607%;
}
20% {
left: 0.032768%;
}
21% {
left: 0.04841326%;
}
22% {
left: 0.0702411181%;
}
23% {
left: 0.1002380612%;
}
24% {
left: 0.1408964021%;
}
25% {
left: 0.1953125%;
}
26% {
left: 0.2672986427%;
}
27% {
left: 0.3615098067%;
}
28% {
left: 0.4835865579%;
}
29% {
left: 0.6403154086%;
}
30% {
left: 0.839808%;
}
31% {
left: 1.0917005279%;
}
32% {
left: 1.4073748836%;
}
33% {
left: 1.8002030313%;
}
34% {
left: 2.2858161983%;
}
35% {
left: 2.8824005%;
}
36% {
left: 3.6110206815%;
}
37% {
left: 4.495973701%;
}
38% {
left: 5.5651739373%;
}
39% {
left: 6.8505718534%;
}
40% {
left: 8.388608%;
}
41% {
left: 10.2207042933%;
}
42% {
left: 12.3937945554%;
}
43% {
left: 14.9608963553%;
}
44% {
left: 17.9817262403%;
}
45% {
left: 21.5233605%;
}
46% {
left: 25.6609436569%;
}
47% {
left: 30.4784469271%;
}
48% {
left: 36.0694789492%;
}
49% {
left: 42.5381511291%;
}
50% {
left: 50%;
}
51% {
left: 57.4618488709%;
}
52% {
left: 63.9305210508%;
}
53% {
left: 69.5215530729%;
}
54% {
left: 74.3390563431%;
}
55% {
left: 78.4766395%;
}
56% {
left: 82.0182737597%;
}
57% {
left: 85.0391036447%;
}
58% {
left: 87.6062054446%;
}
59% {
left: 89.7792957067%;
}
60% {
left: 91.611392%;
}
61% {
left: 93.1494281466%;
}
62% {
left: 94.4348260627%;
}
63% {
left: 95.504026299%;
}
64% {
left: 96.3889793185%;
}
65% {
left: 97.1175995%;
}
66% {
left: 97.7141838017%;
}
67% {
left: 98.1997969687%;
}
68% {
left: 98.5926251164%;
}
69% {
left: 98.9082994721%;
}
70% {
left: 99.160192%;
}
71% {
left: 99.3596845914%;
}
72% {
left: 99.5164134421%;
}
73% {
left: 99.6384901933%;
}
74% {
left: 99.7327013573%;
}
75% {
left: 99.8046875%;
}
76% {
left: 99.8591035979%;
}
77% {
left: 99.8997619388%;
}
78% {
left: 99.9297588819%;
}
79% {
left: 99.95158674%;
}
80% {
left: 99.967232%;
}
81% {
left: 99.9782610393%;
}
82% {
left: 99.9858944505%;
}
83% {
left: 99.9910710305%;
}
84% {
left: 99.9945024419%;
}
85% {
left: 99.9967195%;
}
86% {
left: 99.99811099%;
}
87% {
left: 99.9989558647%;
}
88% {
left: 99.9994496234%;
}
89% {
left: 99.9997256206%;
}
90% {
left: 99.999872%;
}
91% {
left: 99.9999449002%;
}
92% {
left: 99.9999785252%;
}
93% {
left: 99.9999926211%;
}
94% {
left: 99.9999978501%;
}
95% {
left: 99.9999995%;
}
96% {
left: 99.9999999161%;
}
97% {
left: 99.9999999916%;
}
98% {
left: 99.9999999997%;
}
99% {
left: 100%;
}
100% {
left: 100%;
}
}