Reputation: 21
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
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