CSS Animation 仅适用于 Firefox 和 Chrome，但不适用于 Apple 设备（Safari？）答案

【问题标题】：CSS Animation does only work in Firefox and Chrome, but not on Apple Devices (Safari?)CSS Animation 仅适用于 Firefox 和 Chrome，但不适用于 Apple 设备（Safari？）
【发布时间】：2021-10-29 00:12:35
【问题描述】：

我制作了一些动画计数，在 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; }
}

&lt;div&gt;&lt;/div&gt;

我怎样才能在 Apple 设备上也能做到这一点？

也许在某处添加一些-webkit-animation 或@-webkit-keyframes？

【问题讨论】：

这能回答你的问题吗？ CSS3 animation not working in safari
是的，你没看错。您必须使用 webkit 前缀更新样式。您可以检查浏览器兼容性here
@JackBennett：感谢您的评论！不幸的是，链接的答案没有帮助，因为我已经使用了高达 100% 的百分比。
@Ms.Tamil：感谢您的评论！所以我必须双插入所有代码，包括-webkit-prefixes？
看来我错过了那个答案，抱歉。不过，我同意 Tamil 女士的另一条评论 - 检查浏览器兼容性并确保您的代码以这种方式与 safari 一起使用。

标签： html css ios browser css-animations

【解决方案1】：

为您的关键帧使用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;
}

&lt;div&gt;&lt;/div&gt;

也可以看看CanIUse

【讨论】：

太棒了！非常感谢！ :-) 所以这也适用于苹果设备？不幸的是，我这里没有可供测试的东西......
@Dave 对我来说它适用于 Firefox、Chrome 和 Safari :) 。所以我想是的
这在 Safari 上不起作用，因为它会像所有其他浏览器一样获取第二组关键帧。
@Dave 也看看caniuse.com。通过该网站，您可以查看是否所有浏览器都支持哪些元素，或者您是否可能需要webkit。或者支持。这里还有两张图片如何找到类似的东西：i.stack.imgur.com/0wHWi.png 和 i.stack.imgur.com/GrpRu.png
@AHaworth 它对我有用。你用的是哪个版本？