我制作了一些动画计算数字,在 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
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句