CODEWITHSUNDEEP
htmlcssanimationsafaricss-animations
Aaron Choo
Aaron Choo

Reputation: 21

Keyframe animation not starting in Safari

I have some animated elements that work as planned in Chrome, but they do not initiate in Safari. The CSS style -webkit-animation: rotate-second 60s steps(240) infinite appears in Safari inspector but the animation only works once i uncheck it and check it in Safari inspector. Is there any possible reason for this behavior, and is there any workaround to force the animation to initiate upon load?

Edit: Just realized an interesting behavior, where the animation actually initiates when i go back or forward to the page on Safari, but not when I get to the page via a link or by refreshing. I have also included more information for clarity:

(function() {
  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 + 360) + "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 + 360) + "deg);}}"
    ].join("");
  document.getElementById("watch-animation").innerHTML = stylesDeg;
})();
.watch-wrapper {
  position: relative;
  width: 100%;
  padding-top: 157.4%;
  overflow: hidden;
}

.watch-wrapper div,
.watch-base div {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  transform-origin: 50% 50%;
  background-repeat: no-repeat;
  transition: .5s;
}

.watch-base {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  position: absolute;
  top: 0;
}

.watch-hour {
  z-index: 3;
  -webkit-animation: rotate-hour 43200s linear infinite;
  -moz-animation: rotate-hour 43200s linear infinite;
}

.watch-minute {
  z-index: 4;
  -webkit-animation: rotate-minute 3600s linear infinite;
  -moz-animation: rotate-minute 3600s linear infinite;
}

.watch-second {
  z-index: 4;
  -webkit-animation: rotate-second 60s steps(240) infinite;
  -moz-animation: rotate-second 60s steps(240) infinite;
}
<head>
  <style id="watch-animation"></style>
</head>

<body>
  <div class="watch-wrapper">
    <div class="watch-base" style="top:10%;background-image:url(https://time-curated.com/wp-content/collection/patek-philippe-chronometro-gondolo-1905/assets/base.png)">
      <div class="watch-hour" style="background-image:url(https://time-curated.com/wp-content/collection/patek-philippe-chronometro-gondolo-1905/assets/hour-hand.png)"></div>
      <div class="watch-minute" style="background-image:url(https://time-curated.com/wp-content/collection/patek-philippe-chronometro-gondolo-1905/assets/minute-hand.png)"></div>
      <div class="watch-second" style="background-image:url(https://time-curated.com/wp-content/collection/patek-philippe-chronometro-gondolo-1905/assets/second-hand.png);top:13.2%;right:0.4%;z-index:1;"></div>
    </div>
  </div>
</body>

Upvotes: 1

Views: 693

Answers (1)

Aaron Choo
Aaron Choo

Reputation: 21

I've finally figured out a solution: To insert the -webkit-animation and -moz-animation properties via javascript together with the keyframes calculation instead of a separate css:

(function() {
  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 + 360) + "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 + 360) + "deg);}}",
      ".watch-hour{z-index: 3;-webkit-animation: rotate-hour 43200s linear infinite;-moz-animation: rotate-hour 43200s linear infinite;}",
      ".watch-minute{z-index: 4;-webkit-animation: rotate-minute 3600s linear infinite;-moz-animation: rotate-minute 3600s linear infinite;}",
      ".watch-second{z-index: 4;-webkit-animation: rotate-second 60s steps(240) infinite;-moz-animation: rotate-second 60s steps(240) infinite;}"
    ].join("");
  document.getElementById("watch-animation").innerHTML = stylesDeg;
})();
.watch-wrapper {
  position: relative;
  width: 100%;
  padding-top: 157.4%;
  overflow: hidden;
}

.watch-wrapper div,
.watch-base div {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  transform-origin: 50% 50%;
  background-repeat: no-repeat;
  transition: .5s;
}

.watch-base {
  width: 100%;
  height: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  position: absolute;
  top: 0;
}
<head>
  <style id="watch-animation"></style>
</head>

<body>
  <div class="watch-wrapper">
    <div class="watch-base" style="top:10%;background-image:url(https://time-curated.com/wp-content/collection/patek-philippe-chronometro-gondolo-1905/assets/base.png)">
      <div class="watch-hour" style="background-image:url(https://time-curated.com/wp-content/collection/patek-philippe-chronometro-gondolo-1905/assets/hour-hand.png)"></div>
      <div class="watch-minute" style="background-image:url(https://time-curated.com/wp-content/collection/patek-philippe-chronometro-gondolo-1905/assets/minute-hand.png)"></div>
      <div class="watch-second" style="background-image:url(https://time-curated.com/wp-content/collection/patek-philippe-chronometro-gondolo-1905/assets/second-hand.png);top:13.2%;right:0.4%;z-index:1;"></div>
    </div>
  </div>
</body>

Upvotes: 1

Related Questions