Анимация ключевого кадра не работает в Safari на MacOS - PullRequest
Новая
       10

Анимация ключевого кадра не работает в Safari на MacOS

0 голосов
/ 06 апреля 2020

Я скопировал часы из Codepen, которые отлично работают на всех устройствах и во всех браузерах, кроме браузера Safari на MacOS. Почему?

HTML

         <div class="clock-wrapper">
                 <img class="clock" src="img/uhr.png">
                 <div class="clock-hour"></div>
                 <div class="clock-minute"></div>
                 <div class="clock-second"></div>
                 <div class="clock-center"></div>
         </div>

JS

var now       = new Date(),
            hourDeg   = now.getHours() / 12 * 360 + now.getMinutes() / 60 * 30,
            minuteDeg = now.getMinutes() / 60 * 360 + now.getSeconds() / 60 * 6,
            secondDeg = now.getSeconds() / 60 * 360,
            stylesDeg = [
                "@-webkit-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
                "@-webkit-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
                "@-webkit-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 4360) + "deg);}}",
                "@-moz-keyframes rotate-hour{from{transform:rotate(" + hourDeg + "deg);}to{transform:rotate(" + (hourDeg + 360) + "deg);}}",
                "@-moz-keyframes rotate-minute{from{transform:rotate(" + minuteDeg + "deg);}to{transform:rotate(" + (minuteDeg + 360) + "deg);}}",
                "@-moz-keyframes rotate-second{from{transform:rotate(" + secondDeg + "deg);}to{transform:rotate(" + (secondDeg + 4360) + "deg);}}"
            ].join("");

        document.getElementById("clock-animations").innerHTML = stylesDeg;
...