Safari 关键帧动画中的多个属性答案

【问题标题】：Safari multiple properties in keyframe animationsSafari 关键帧动画中的多个属性
【发布时间】：2019-09-23 15:11:23
【问题描述】：

尝试在动画中为 Safari 中的多个属性设置动画似乎不起作用。

@keyframes move
  from
    filter drop-shadow(0 -5px 12px red)
    transform rotateX(15deg) translateY(-1rem)
  to
    filter drop-shadow(0 -5px 50px green)
    transform translateY(2rem) rotateX(-15deg)

这是一个在 chrome 中完美运行的示例：

https://jsbin.com/zoyarokuge/1/edit?html,css,output

在 safari 中根本不起作用。不过，动画每个属性、变换或过滤器都可以正常工作。这是一个已知的错误，有解决方法吗？

【问题讨论】：

定义两个动画并同时应用它们，也许它会起作用

标签： css safari css-animations

【解决方案1】：

不同的浏览器会有不同的供应商前缀。例如，对于 google chrome 和 safari 使用 -webkit 和 Internet Explorer，我们需要使用 -ms。对于您可以使用的查询，您可以使用@-webkit-keyframes 代替@keyframes，而您可以使用-webkit-animation 代替动画。

【讨论】：