|
@@ -1,3 +1,12 @@
|
|
1
|
+@-webkit-keyframes timebar
|
|
2
|
+{
|
|
3
|
+ 0%{width: 100%;background-color: #57cc6b;}
|
|
4
|
+ 30%{background-color: #57cc6b;}
|
|
5
|
+ 40%{background-color: #e3a55c;}
|
|
6
|
+ 60%{background-color: #e3a55c;}
|
|
7
|
+ 70%{background-color: #cc5757;}
|
|
8
|
+ 100%{width: 0;background-color: #cc5757;}
|
|
9
|
+}
|
1
|
10
|
@keyframes timebar
|
2
|
11
|
{
|
3
|
12
|
0%{width: 100%;background-color: #57cc6b;}
|
|
@@ -16,14 +25,17 @@
|
16
|
25
|
|
17
|
26
|
.timer
|
18
|
27
|
{
|
|
28
|
+ -webkit-animation: timebar 5s linear;
|
19
|
29
|
animation: timebar 5s linear;
|
20
|
30
|
}
|
21
|
31
|
|
22
|
32
|
.pause {
|
|
33
|
+ -webkit-animation-play-state: paused;
|
23
|
34
|
animation-play-state: paused;
|
24
|
35
|
}
|
25
|
36
|
|
26
|
37
|
.clearTimer {
|
|
38
|
+ -webkit-animation: none;
|
27
|
39
|
animation: none;
|
28
|
40
|
}
|
29
|
41
|
|