Несколько свойств 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

Различные браузеры будут иметь разные префиксы поставщиков.Например, для Google Chrome и Safari используйте -webkit и Internet Explorer, нам нужно использовать -ms.Для вашего запроса вы можете использовать вместо @keyframes вы можете использовать @ -webkit-keyframes и вместо анимации вы можете использовать -webkit-animation.