CSS animation started via JS not working with Safari
Question
I'm using a simple CSS animation to create a fade-in effect based on opacity. The animation is started via JS in order to wait until the browser completed loading. It does work with Firefox and Chrome, but does not start with Safari. Interestingly, it also does work with Safari locally, ie if the browser loads website data that is saved onto my computer locally! It does not work with Safari if the website data is loaded from an external server.
I found out that the animation also starts with an external server involved if I let Safari display "web information" or set the "responsive design" mode!
I could test it with Safari 9 and 11 (and cleared cache). I could not find any existing threads addressing this or a similiar issue. Thank you in advance!
HTML:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>test</title>
<link rel="stylesheet" href="stylesheet.css"/>
<script src="js-script.js"></script>
</head>
<body>
<main>
<div id="fading">
Test
</div>
</main>
</body>
</html>
CSS:
#fading {
/* shorthand notation not always working with Safari */
-webkit-animation-name: fadein;
-webkit-animation-duration: 5s;
-webkit-animation-timing-function: ease-in;
-webkit-animation-play-state: paused;
-moz-animation: fadein 5s ease-in;
-moz-animation-play-state: paused;
-o-animation: fadein 5s ease-in;
-o-animation-play-state: paused;
animation: fadein 5s ease-in;
animation-play-state: paused;
}
@-webkit-keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
@-moz-keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
@-o-keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
JS:
"use strict";
function start() {
var fading = document.getElementById("fading");
fading.style.webkitAnimationPlayState = "running";
fading.style.mozAnimationPlayState = "running";
fading.style.oAnimationPlayState = "running";
fading.style.animationPlayState = "running";
}
window.onload = start;
1 answers
solution1
0 2018-03-29 21:56:55
Well, I decided for a different approach finally using CSS transitions. This seems to be more appropriate for js-started fading effects and does not show the Safari issue described above. In addition, JS and CSS need less lines of code.
CSS:
#fading {
opacity: 0;
-webkit-transition: opacity 5s ease-in;
-moz-transition: opacity 5s ease-in;
-o-transition: opacity 5s ease-in;
transition: opacity 5s ease-in;
}
JS:
"use strict";
function start() {
var fading = document.getElementById("fading");
fading.style.opacity = 1;
}
window.onload = start;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.