关键帧动画未在Safari中启动

问题描述 投票：0回答：1

我有一些动画元素可以在Chrome中按计划工作，但不能在Safari中启动。CSS样式-webkit-animation: rotate-second 60s steps(240) infinite出现在Safari检查器中，但动画仅在我取消选中并在Safari检查器中检查后才起作用。是否有这种现象的可能原因，是否有任何变通方法来强制动画在加载时启动？

编辑：刚意识到一个有趣的行为，当我在Safari上前进或后退到页面时，动画实际上会启动，但是当我通过链接或刷新到达页面时，动画实际上不会启动。为了清楚起见，我还提供了更多信息：

(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>
html css animation safari css-animations
1个回答
0
投票

我终于找到了解决方案：要通过javascript插入-webkit-animation和-moz-animation属性以及关键帧计算（而不是单独的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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.