CSS 动画仅适用于 Firefox 和 Chrome,但不适用于 Apple 设备(Safari?)
CSS Animation does only work in Firefox and Chrome, but not on Apple Devices (Safari?)
我制作了一个计数数字的小动画,它在 Firefox 和 Chrome 浏览器中运行良好,但在 Apple 设备的默认浏览器(Safari?)中却不行:
div::after {
font: 800 40px system-ui;
content: counter(count);
animation: counter 5s linear forwards;
counter-reset: count 0;
}
@keyframes counter {
0% { counter-increment: count 0; }
10% { counter-increment: count 8; }
20% { counter-increment: count 16; }
30% { counter-increment: count 32; }
40% { counter-increment: count 64; }
50% { counter-increment: count 128; }
60% { counter-increment: count 256; }
70% { counter-increment: count 512; }
80% { counter-increment: count 1024; }
90% { counter-increment: count 2048; }
100% { counter-increment: count 4000; }
}
<div></div>
如何在 Apple 设备上也能使用此功能?
也许可以在某处添加一些 -webkit-animation
或 @-webkit-keyframes
?
对关键帧使用 webkits
:
@-webkit-keyframes counter {
0% { -webkit-counter-increment: count 0; }
10% { -webkit-counter-increment: count 8; }
20% { -webkit-counter-increment: count 16; }
30% { -webkit-counter-increment: count 32; }
40% { -webkit-counter-increment: count 64; }
50% { -webkit-counter-increment: count 128; }
60% { -webkit-counter-increment: count 256; }
70% { -webkit-counter-increment: count 512; }
80% { -webkit-counter-increment: count 1024; }
90% { -webkit-counter-increment: count 2048; }
100% { -webkit-counter-increment: count 4000; }
}
@keyframes counter {
0% { counter-increment: count 0; }
10% { counter-increment: count 8; }
20% { counter-increment: count 16; }
30% { counter-increment: count 32; }
40% { counter-increment: count 64; }
50% { counter-increment: count 128; }
60% { counter-increment: count 256; }
70% { counter-increment: count 512; }
80% { counter-increment: count 1024; }
90% { counter-increment: count 2048; }
100% { counter-increment: count 4000; }
}
div::after {
font: 800 40px system-ui;
content: counter(count);
animation: counter 5s linear forwards;
counter-reset: count 0;
}
<div></div>
也看看CanIUse
我制作了一个计数数字的小动画,它在 Firefox 和 Chrome 浏览器中运行良好,但在 Apple 设备的默认浏览器(Safari?)中却不行:
div::after {
font: 800 40px system-ui;
content: counter(count);
animation: counter 5s linear forwards;
counter-reset: count 0;
}
@keyframes counter {
0% { counter-increment: count 0; }
10% { counter-increment: count 8; }
20% { counter-increment: count 16; }
30% { counter-increment: count 32; }
40% { counter-increment: count 64; }
50% { counter-increment: count 128; }
60% { counter-increment: count 256; }
70% { counter-increment: count 512; }
80% { counter-increment: count 1024; }
90% { counter-increment: count 2048; }
100% { counter-increment: count 4000; }
}
<div></div>
如何在 Apple 设备上也能使用此功能?
也许可以在某处添加一些 -webkit-animation
或 @-webkit-keyframes
?
对关键帧使用 webkits
:
@-webkit-keyframes counter {
0% { -webkit-counter-increment: count 0; }
10% { -webkit-counter-increment: count 8; }
20% { -webkit-counter-increment: count 16; }
30% { -webkit-counter-increment: count 32; }
40% { -webkit-counter-increment: count 64; }
50% { -webkit-counter-increment: count 128; }
60% { -webkit-counter-increment: count 256; }
70% { -webkit-counter-increment: count 512; }
80% { -webkit-counter-increment: count 1024; }
90% { -webkit-counter-increment: count 2048; }
100% { -webkit-counter-increment: count 4000; }
}
@keyframes counter {
0% { counter-increment: count 0; }
10% { counter-increment: count 8; }
20% { counter-increment: count 16; }
30% { counter-increment: count 32; }
40% { counter-increment: count 64; }
50% { counter-increment: count 128; }
60% { counter-increment: count 256; }
70% { counter-increment: count 512; }
80% { counter-increment: count 1024; }
90% { counter-increment: count 2048; }
100% { counter-increment: count 4000; }
}
div::after {
font: 800 40px system-ui;
content: counter(count);
animation: counter 5s linear forwards;
counter-reset: count 0;
}
<div></div>
也看看CanIUse