Как использовать .animate javascript в Safari? Получение undefined не является функцией

Question

Я пытаюсь анимировать несколько листов в случайном порядке. Вот мой код:

var leafs = document.querySelectorAll(".leaf");

leafs.forEach(function(leaf) {

        var angle = parseInt(leaf.getAttribute("data-angle")),
            posY = parseInt(leaf.getAttribute("data-top")),
            posX = parseInt(leaf.getAttribute("data-left")),
            directionX = Math.random() < 0.5 ? -1 : 1,
            directionY = Math.random() < 0.5 ? -1 : 1,
            newposX = directionX * Math.round(Math.random()*10) + posX,
            newposY = directionY * Math.round(Math.random()*10) + posY,
            angleRotation = Math.round(Math.random()*20) + angle;
            //keyframe = {transform: ['translate3d(' + posX + 'px,' + posY + 'px, 0px) rotate(' + angle + 'deg)', 'translate3d(' + newposX + ',' + newposY + ', 0px) rotate(' + angleRotation + ')']};

        console.log(leaf);

        leaf.animate([
            {
             transform: 'translate3d(' + posX + 'px,' + posY + 'px, 0px) rotate(' + angle + 'deg) '
            },
            {
             transform: 'translate3d(' + newposX + 'px,' + newposY + 'px, 0px) rotate(' + angleRotation + 'deg)'
            }
        ], {
            iterations: Infinity,
            direction: 'alternate',
            easing: 'ease-in-out',
            duration: 3000
        });
    });

В Firefox и Chrome все работает нормально. В сафари я получил следующую ошибку, я не знаю, как с этим справиться. Я использую ваниль JavaScript.

TypeError: undefined is not a function (near '...leaf.animate...')

UPDATE

Оказывается, мне нужен либо полифилл, либо Jquery.

PolyFill можно найти здесь: web-animations-js

Answer 1

Проверьте web-animations-js, полизаполнение w3, предоставленное Google. Он немного устарел, но работает для большинства функций API веб-анимации как минимум в 99% браузеров.