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

Question

尝试在野生动物园的动画中为多个属性设置动画似乎无效。

@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

在野生动物园根本不起作用。对每个属性进行动画处理，分别进行变换或过滤都可以正常工作。这是一个已知的错误，是否有解决方法？

Answer 1

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