CSS 动画仅适用于 Firefox 和 Chrome,但不适用于 Apple 设备(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某处?

Gucci香蕉王99

使用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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

CSS @ font-face不适用于Firefox,但适用于Chrome和IE

jQuery Javascript仅适用于chrome和firefox,不适用于IE

CSS不适用于IE和Firefox,但可在Chrome中使用

CSS3动画背景不适用于Firefox

显示:flex; 不适用于iPad(Chrome和Safari)

Kerberos授权不适用于Chrome和FireFox,但适用于IE

Selenium代码不适用于Safari和Firefox和Chrome中的元素定位

Socket.IO适用于Firefox和Edge,但不适用于Chrome吗?

转换属性不适用于Firefox,但适用于Chrome和Safari。该怎么办?

JS / CSS代码适用于Chrome,但不适用于Firefox

自定义元素适用于Safari,但不适用于Firefox和Chrome

CSS不透明度不适用于chrome,但适用于firefox

CSS规则适用于IE,但不适用于Chrome / Firefox

CSS-@media不适用于Firefox和IE

带load()的jquery-issue:适用于Firefox和Safari,不适用于Chrome,Opera和IE

jQuery touch Punch适用于Chrome和Firefox,但不适用于IE

PHP排序不适用于Chrome和Safari

JS适用于Firefox和Safari,但不适用于Chrome。这是我的网站

适用于chrome,但不适用于Firefox,Eventlistener,appendChild和style.backgroundColor

表单验证不适用于Chrome和Firefox

表格中网址的自动换行适用于chrome和safari,不适用于Firefox

响应式网页设计适用于桌面,但不适用于移动设备,它不会加载 CSS 和 JavaScript

单击切换适用于 Chrome 和 Safari 但不适用于 Firefox?

SVG 动画不适用于 mozilla,但适用于 chrome 和 safari

不透明度的 CSS 动画不适用于 safari,但适用于 google chrome

脚本仅适用于 Chrome 和 Firefox 桌面,不适用于 Safari 和任何移动浏览器

Angular 网站适用于 Chrome,而不适用于 Firefox 或 Safari

CSS 动画目前仅适用于 Firefox,不适用于 Chrome 或 Safari

CSS 动画不适用于 ::before 和 ::after