0
Я создал этот обратный отсчет, и он отлично работает на Chrome. Проблемы в других браузерах, в которых я не могу заставить его работать в следующих направлениях:Анимация: после {content: ""} с @keyframes
Firefox: Свойство Содержание номера CSS не анимированными
IE11: Ничто не работает
CodePen для редактирования/визуализация
Существует ли кросс-браузерный способ анимировать свойство содержимого псевдоэлементов с надежными объектами @keyframes? Если нет, можете ли вы придумать другой способ только для CSS, чтобы сделать обратный отсчет? Кроме того, не поддерживает ли IE11 поддержку анимации SVG-штрихов?
Вот полная демо с Sass компилируется в CSS:
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
/*
* Max value is 5940 seconds
* (99 minutes)
*/
.container {
position: relative;
height: 400px;
width: 400px;
background-color: #abdddb;
}
svg {
position: absolute;
width: 100%;
height: 100%;
}
svg .circle {
fill: none;
stroke: #29bdc0;
stroke-width: 20px;
stroke-dasharray: 650;
stroke-dashoffset: 650;
animation: circle 121s 0s linear forwards;
-o-animation: circle 121s 0s linear forwards;
-moz-animation: circle 121s 0s linear forwards;
-webkit-animation: circle 121s 0s linear forwards;
}
svg .circle.shadow {
position: absolute;
top: 2px;
stroke: #000;
opacity: 0.2;
-webkit-transform: translateY(2px);
transform: translateY(2px);
}
.mask {
overflow: hidden;
position: absolute;
width: 155px;
height: 70px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.mask .number {
display: block;
width: 155px;
height: 40px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
animation: number 0.8s 121.1s ease forwards;
-o-animation: number 0.8s 121.1s ease forwards;
-moz-animation: number 0.8s 121.1s ease forwards;
-webkit-animation: number 0.8s 121.1s ease forwards;
}
.mask p {
display: block;
position: absolute;
text-align: center;
color: #fff;
font-family: 'Roboto Mono', monospace;
font-size: 50px;
font-weight: bold;
text-shadow: rgba(0, 0, 0, 0.2) 0 2px;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -40%);
transform: translate(-50%, -40%);
animation: done 1s 121.6s ease forwards;
-o-animation: done 1s 121.6s ease forwards;
-moz-animation: done 1s 121.6s ease forwards;
-webkit-animation: done 1s 121.6s ease forwards;
}
/* Initial counter state */
.number:after {
display: block;
width: 155px;
position: absolute;
text-align: center;
color: #fff;
animation: counter 120s 1s linear forwards;
-o-animation: counter 120s 1s linear forwards;
-moz-animation: counter 120s 1s linear forwards;
-webkit-animation: counter 120s 1s linear forwards;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: 'Roboto Mono', monospace;
font-size: 50px;
font-weight: bold;
text-shadow: rgba(0, 0, 0, 0.2) 0 2px;
content: "02:00";
}
/* ----- Keyframes ----- */
/* Countdown */
@-webkit-keyframes counter {
/*119 seconds*/
0.83333% {
content: "01:59";
}
/*118 seconds*/
1.66667% {
content: "01:58";
}
/*117 seconds*/
2.5% {
content: "01:57";
}
/*116 seconds*/
3.33333% {
content: "01:56";
}
/*115 seconds*/
4.16667% {
content: "01:55";
}
/*114 seconds*/
5% {
content: "01:54";
}
/*113 seconds*/
5.83333% {
content: "01:53";
}
/*112 seconds*/
6.66667% {
content: "01:52";
}
/*111 seconds*/
7.5% {
content: "01:51";
}
/*110 seconds*/
8.33333% {
content: "01:50";
}
/*109 seconds*/
9.16667% {
content: "01:49";
}
/*108 seconds*/
10% {
content: "01:48";
}
/*107 seconds*/
10.83333% {
content: "01:47";
}
/*106 seconds*/
11.66667% {
content: "01:46";
}
/*105 seconds*/
12.5% {
content: "01:45";
}
/*104 seconds*/
13.33333% {
content: "01:44";
}
/*103 seconds*/
14.16667% {
content: "01:43";
}
/*102 seconds*/
15% {
content: "01:42";
}
/*101 seconds*/
15.83333% {
content: "01:41";
}
/*100 seconds*/
16.66667% {
content: "01:40";
}
/*99 seconds*/
17.5% {
content: "01:39";
}
/*98 seconds*/
18.33333% {
content: "01:38";
}
/*97 seconds*/
19.16667% {
content: "01:37";
}
/*96 seconds*/
20% {
content: "01:36";
}
/*95 seconds*/
20.83333% {
content: "01:35";
}
/*94 seconds*/
21.66667% {
content: "01:34";
}
/*93 seconds*/
22.5% {
content: "01:33";
}
/*92 seconds*/
23.33333% {
content: "01:32";
}
/*91 seconds*/
24.16667% {
content: "01:31";
}
/*90 seconds*/
25% {
content: "01:30";
}
/*89 seconds*/
25.83333% {
content: "01:29";
}
/*88 seconds*/
26.66667% {
content: "01:28";
}
/*87 seconds*/
27.5% {
content: "01:27";
}
/*86 seconds*/
28.33333% {
content: "01:26";
}
/*85 seconds*/
29.16667% {
content: "01:25";
}
/*84 seconds*/
30% {
content: "01:24";
}
/*83 seconds*/
30.83333% {
content: "01:23";
}
/*82 seconds*/
31.66667% {
content: "01:22";
}
/*81 seconds*/
32.5% {
content: "01:21";
}
/*80 seconds*/
33.33333% {
content: "01:20";
}
/*79 seconds*/
34.16667% {
content: "01:19";
}
/*78 seconds*/
35% {
content: "01:18";
}
/*77 seconds*/
35.83333% {
content: "01:17";
}
/*76 seconds*/
36.66667% {
content: "01:16";
}
/*75 seconds*/
37.5% {
content: "01:15";
}
/*74 seconds*/
38.33333% {
content: "01:14";
}
/*73 seconds*/
39.16667% {
content: "01:13";
}
/*72 seconds*/
40% {
content: "01:12";
}
/*71 seconds*/
40.83333% {
content: "01:11";
}
/*70 seconds*/
41.66667% {
content: "01:10";
}
/*69 seconds*/
42.5% {
content: "01:09";
}
/*68 seconds*/
43.33333% {
content: "01:08";
}
/*67 seconds*/
44.16667% {
content: "01:07";
}
/*66 seconds*/
45% {
content: "01:06";
}
/*65 seconds*/
45.83333% {
content: "01:05";
}
/*64 seconds*/
46.66667% {
content: "01:04";
}
/*63 seconds*/
47.5% {
content: "01:03";
}
/*62 seconds*/
48.33333% {
content: "01:02";
}
/*61 seconds*/
49.16667% {
content: "01:01";
}
/*60 seconds*/
50% {
content: "01:00";
}
/*59 seconds*/
50.83333% {
content: "00:59";
}
/*58 seconds*/
51.66667% {
content: "00:58";
}
/*57 seconds*/
52.5% {
content: "00:57";
}
/*56 seconds*/
53.33333% {
content: "00:56";
}
/*55 seconds*/
54.16667% {
content: "00:55";
}
/*54 seconds*/
55% {
content: "00:54";
}
/*53 seconds*/
55.83333% {
content: "00:53";
}
/*52 seconds*/
56.66667% {
content: "00:52";
}
/*51 seconds*/
57.5% {
content: "00:51";
}
/*50 seconds*/
58.33333% {
content: "00:50";
}
/*49 seconds*/
59.16667% {
content: "00:49";
}
/*48 seconds*/
60% {
content: "00:48";
}
/*47 seconds*/
60.83333% {
content: "00:47";
}
/*46 seconds*/
61.66667% {
content: "00:46";
}
/*45 seconds*/
62.5% {
content: "00:45";
}
/*44 seconds*/
63.33333% {
content: "00:44";
}
/*43 seconds*/
64.16667% {
content: "00:43";
}
/*42 seconds*/
65% {
content: "00:42";
}
/*41 seconds*/
65.83333% {
content: "00:41";
}
/*40 seconds*/
66.66667% {
content: "00:40";
}
/*39 seconds*/
67.5% {
content: "00:39";
}
/*38 seconds*/
68.33333% {
content: "00:38";
}
/*37 seconds*/
69.16667% {
content: "00:37";
}
/*36 seconds*/
70% {
content: "00:36";
}
/*35 seconds*/
70.83333% {
content: "00:35";
}
/*34 seconds*/
71.66667% {
content: "00:34";
}
/*33 seconds*/
72.5% {
content: "00:33";
}
/*32 seconds*/
73.33333% {
content: "00:32";
}
/*31 seconds*/
74.16667% {
content: "00:31";
}
/*30 seconds*/
75% {
content: "00:30";
}
/*29 seconds*/
75.83333% {
content: "00:29";
}
/*28 seconds*/
76.66667% {
content: "00:28";
}
/*27 seconds*/
77.5% {
content: "00:27";
}
/*26 seconds*/
78.33333% {
content: "00:26";
}
/*25 seconds*/
79.16667% {
content: "00:25";
}
/*24 seconds*/
80% {
content: "00:24";
}
/*23 seconds*/
80.83333% {
content: "00:23";
}
/*22 seconds*/
81.66667% {
content: "00:22";
}
/*21 seconds*/
82.5% {
content: "00:21";
}
/*20 seconds*/
83.33333% {
content: "00:20";
}
/*19 seconds*/
84.16667% {
content: "00:19";
}
/*18 seconds*/
85% {
content: "00:18";
}
/*17 seconds*/
85.83333% {
content: "00:17";
}
/*16 seconds*/
86.66667% {
content: "00:16";
}
/*15 seconds*/
87.5% {
content: "00:15";
}
/*14 seconds*/
88.33333% {
content: "00:14";
}
/*13 seconds*/
89.16667% {
content: "00:13";
}
/*12 seconds*/
90% {
content: "00:12";
}
/*11 seconds*/
90.83333% {
content: "00:11";
}
/*10 seconds*/
91.66667% {
content: "00:10";
}
/*9 seconds*/
92.5% {
content: "00:09";
}
/*8 seconds*/
93.33333% {
content: "00:08";
}
/*7 seconds*/
94.16667% {
content: "00:07";
}
/*6 seconds*/
95% {
content: "00:06";
}
/*5 seconds*/
95.83333% {
content: "00:05";
}
/*4 seconds*/
96.66667% {
content: "00:04";
}
/*3 seconds*/
97.5% {
content: "00:03";
}
/*2 seconds*/
98.33333% {
content: "00:02";
}
/*1 seconds*/
99.16667% {
content: "00:01";
}
/*0 seconds*/
100% {
content: "00:00";
}
}
@keyframes counter {
/*119 seconds*/
0.83333% {
content: "01:59";
}
/*118 seconds*/
1.66667% {
content: "01:58";
}
/*117 seconds*/
2.5% {
content: "01:57";
}
/*116 seconds*/
3.33333% {
content: "01:56";
}
/*115 seconds*/
4.16667% {
content: "01:55";
}
/*114 seconds*/
5% {
content: "01:54";
}
/*113 seconds*/
5.83333% {
content: "01:53";
}
/*112 seconds*/
6.66667% {
content: "01:52";
}
/*111 seconds*/
7.5% {
content: "01:51";
}
/*110 seconds*/
8.33333% {
content: "01:50";
}
/*109 seconds*/
9.16667% {
content: "01:49";
}
/*108 seconds*/
10% {
content: "01:48";
}
/*107 seconds*/
10.83333% {
content: "01:47";
}
/*106 seconds*/
11.66667% {
content: "01:46";
}
/*105 seconds*/
12.5% {
content: "01:45";
}
/*104 seconds*/
13.33333% {
content: "01:44";
}
/*103 seconds*/
14.16667% {
content: "01:43";
}
/*102 seconds*/
15% {
content: "01:42";
}
/*101 seconds*/
15.83333% {
content: "01:41";
}
/*100 seconds*/
16.66667% {
content: "01:40";
}
/*99 seconds*/
17.5% {
content: "01:39";
}
/*98 seconds*/
18.33333% {
content: "01:38";
}
/*97 seconds*/
19.16667% {
content: "01:37";
}
/*96 seconds*/
20% {
content: "01:36";
}
/*95 seconds*/
20.83333% {
content: "01:35";
}
/*94 seconds*/
21.66667% {
content: "01:34";
}
/*93 seconds*/
22.5% {
content: "01:33";
}
/*92 seconds*/
23.33333% {
content: "01:32";
}
/*91 seconds*/
24.16667% {
content: "01:31";
}
/*90 seconds*/
25% {
content: "01:30";
}
/*89 seconds*/
25.83333% {
content: "01:29";
}
/*88 seconds*/
26.66667% {
content: "01:28";
}
/*87 seconds*/
27.5% {
content: "01:27";
}
/*86 seconds*/
28.33333% {
content: "01:26";
}
/*85 seconds*/
29.16667% {
content: "01:25";
}
/*84 seconds*/
30% {
content: "01:24";
}
/*83 seconds*/
30.83333% {
content: "01:23";
}
/*82 seconds*/
31.66667% {
content: "01:22";
}
/*81 seconds*/
32.5% {
content: "01:21";
}
/*80 seconds*/
33.33333% {
content: "01:20";
}
/*79 seconds*/
34.16667% {
content: "01:19";
}
/*78 seconds*/
35% {
content: "01:18";
}
/*77 seconds*/
35.83333% {
content: "01:17";
}
/*76 seconds*/
36.66667% {
content: "01:16";
}
/*75 seconds*/
37.5% {
content: "01:15";
}
/*74 seconds*/
38.33333% {
content: "01:14";
}
/*73 seconds*/
39.16667% {
content: "01:13";
}
/*72 seconds*/
40% {
content: "01:12";
}
/*71 seconds*/
40.83333% {
content: "01:11";
}
/*70 seconds*/
41.66667% {
content: "01:10";
}
/*69 seconds*/
42.5% {
content: "01:09";
}
/*68 seconds*/
43.33333% {
content: "01:08";
}
/*67 seconds*/
44.16667% {
content: "01:07";
}
/*66 seconds*/
45% {
content: "01:06";
}
/*65 seconds*/
45.83333% {
content: "01:05";
}
/*64 seconds*/
46.66667% {
content: "01:04";
}
/*63 seconds*/
47.5% {
content: "01:03";
}
/*62 seconds*/
48.33333% {
content: "01:02";
}
/*61 seconds*/
49.16667% {
content: "01:01";
}
/*60 seconds*/
50% {
content: "01:00";
}
/*59 seconds*/
50.83333% {
content: "00:59";
}
/*58 seconds*/
51.66667% {
content: "00:58";
}
/*57 seconds*/
52.5% {
content: "00:57";
}
/*56 seconds*/
53.33333% {
content: "00:56";
}
/*55 seconds*/
54.16667% {
content: "00:55";
}
/*54 seconds*/
55% {
content: "00:54";
}
/*53 seconds*/
55.83333% {
content: "00:53";
}
/*52 seconds*/
56.66667% {
content: "00:52";
}
/*51 seconds*/
57.5% {
content: "00:51";
}
/*50 seconds*/
58.33333% {
content: "00:50";
}
/*49 seconds*/
59.16667% {
content: "00:49";
}
/*48 seconds*/
60% {
content: "00:48";
}
/*47 seconds*/
60.83333% {
content: "00:47";
}
/*46 seconds*/
61.66667% {
content: "00:46";
}
/*45 seconds*/
62.5% {
content: "00:45";
}
/*44 seconds*/
63.33333% {
content: "00:44";
}
/*43 seconds*/
64.16667% {
content: "00:43";
}
/*42 seconds*/
65% {
content: "00:42";
}
/*41 seconds*/
65.83333% {
content: "00:41";
}
/*40 seconds*/
66.66667% {
content: "00:40";
}
/*39 seconds*/
67.5% {
content: "00:39";
}
/*38 seconds*/
68.33333% {
content: "00:38";
}
/*37 seconds*/
69.16667% {
content: "00:37";
}
/*36 seconds*/
70% {
content: "00:36";
}
/*35 seconds*/
70.83333% {
content: "00:35";
}
/*34 seconds*/
71.66667% {
content: "00:34";
}
/*33 seconds*/
72.5% {
content: "00:33";
}
/*32 seconds*/
73.33333% {
content: "00:32";
}
/*31 seconds*/
74.16667% {
content: "00:31";
}
/*30 seconds*/
75% {
content: "00:30";
}
/*29 seconds*/
75.83333% {
content: "00:29";
}
/*28 seconds*/
76.66667% {
content: "00:28";
}
/*27 seconds*/
77.5% {
content: "00:27";
}
/*26 seconds*/
78.33333% {
content: "00:26";
}
/*25 seconds*/
79.16667% {
content: "00:25";
}
/*24 seconds*/
80% {
content: "00:24";
}
/*23 seconds*/
80.83333% {
content: "00:23";
}
/*22 seconds*/
81.66667% {
content: "00:22";
}
/*21 seconds*/
82.5% {
content: "00:21";
}
/*20 seconds*/
83.33333% {
content: "00:20";
}
/*19 seconds*/
84.16667% {
content: "00:19";
}
/*18 seconds*/
85% {
content: "00:18";
}
/*17 seconds*/
85.83333% {
content: "00:17";
}
/*16 seconds*/
86.66667% {
content: "00:16";
}
/*15 seconds*/
87.5% {
content: "00:15";
}
/*14 seconds*/
88.33333% {
content: "00:14";
}
/*13 seconds*/
89.16667% {
content: "00:13";
}
/*12 seconds*/
90% {
content: "00:12";
}
/*11 seconds*/
90.83333% {
content: "00:11";
}
/*10 seconds*/
91.66667% {
content: "00:10";
}
/*9 seconds*/
92.5% {
content: "00:09";
}
/*8 seconds*/
93.33333% {
content: "00:08";
}
/*7 seconds*/
94.16667% {
content: "00:07";
}
/*6 seconds*/
95% {
content: "00:06";
}
/*5 seconds*/
95.83333% {
content: "00:05";
}
/*4 seconds*/
96.66667% {
content: "00:04";
}
/*3 seconds*/
97.5% {
content: "00:03";
}
/*2 seconds*/
98.33333% {
content: "00:02";
}
/*1 seconds*/
99.16667% {
content: "00:01";
}
/*0 seconds*/
100% {
content: "00:00";
}
}
/* Move out counter */
@-webkit-keyframes number {
0% {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
20% {
-webkit-transform: translate(-50%, -25%);
transform: translate(-50%, -25%);
}
100% {
-webkit-transform: translate(-50%, -210%);
transform: translate(-50%, -210%);
}
}
@keyframes number {
0% {
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
20% {
-webkit-transform: translate(-50%, -25%);
transform: translate(-50%, -25%);
}
100% {
-webkit-transform: translate(-50%, -210%);
transform: translate(-50%, -210%);
}
}
/* Circle progress */
@-webkit-keyframes circle {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 650;
}
}
@keyframes circle {
from {
stroke-dashoffset: 0;
}
to {
stroke-dashoffset: 650;
}
}<div class="container">
<svg>
<!--Used for the drop shadow -->
<path class="circle shadow" d="M200.2,302c-0.1,0-0.2,0-0.2,0c-56.9,0-103-46.1-103-103S143.1,96,200,96s103,46.1,103,103
\t \t \t c0,56.8-45.9,102.8-102.6,103C200.3,302,200.3,302,200.2,302"/>
<!-- Colored circle -->
<path class="circle" d="M200.2,302c-0.1,0-0.2,0-0.2,0c-56.9,0-103-46.1-103-103S143.1,96,200,96s103,46.1,103,103
\t \t c0,56.8-45.9,102.8-102.6,103C200.3,302,200.3,302,200.2,302"/>
</svg>
<div class="mask">
<div class="number"></div>
<p>DONE</p>
</div>
</div>