Safari 關鍵幀動畫中的多個屬性

Question

嘗試在 animation 中為 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,Z78E66221F6398F1CE31

在 safari 中根本不起作用。 Animation 每個屬性，轉換或過濾器單獨工作正常。 這是一個已知的錯誤，有解決方法嗎？

Answer 1

不同的瀏覽器會有不同的供應商前綴。 例如，對於 google chrome 和 safari 使用 -webkit 和 Internet Explorer，我們需要使用 -ms。 對於您可以使用的查詢，您可以使用@-webkit-keyframes 代替@keyframes，而您可以使用-webkit-animation 代替animation。