Clash Royale CLAN TAG#URR8PPP

changing animation delay using j Query while animation is paused does not work on Safari but it does everywhere else

I set up a keyframe animation in CSS. Attached it to a DOM element and set it to pause. With javascript (jQuery), I am changing the animation delay from 0s to 100s achieving a nice animation while scrolling.

0s

100s

This works well on all of the browsers, but not on Safari (Version 11.1.1 (13605.2.8)).

$(document).ready(function()
fluider([

selector: '.manualAnim',
start: 100,
end: 500
,


selector: '.manualAnim2',
start: 500,
end: 1000
,


selector: '.manualAnim3',
start: 0,
end: 1500


])
)


function fluider(o)
for(var i = 0; i < o.length; i++)
$(o[i].selector).css('animation-play-state','paused');
$(o[i].selector).css('animation-duration','100s');

$(window).scroll(function()
var h = $(window).scrollTop();
for(var i = 0; i < o.length; i++)

$(o[i].selector).css('animation-delay',-clamp(0,100,((h-o[i].start)/o[i].end * 100)) + 's');

);



function clamp(from, to, val)
if(val >= from)
if(val <= to)
return val;

else
return to;


else
return from;



body
height: 1000vh;

.manualAnim
position: fixed;
display: block;
width: 100px;
height: 100px;
background-color: red;
animation: 100s anim paused both;
animation-delay: 0s;


.manualAnim2
position: fixed;
display: block;
left: 120px;
width: 100px;
height: 100px;
background-color: red;
animation: 100s anim paused both;
animation-delay: 0s;


.manualAnim3
position: fixed;
display: block;
left: 240px;
width: 100px;
height: 100px;
background-color: red;
animation: 100s anim paused both;
animation-delay: 0s;


@keyframes anim
0%
background-color: red;
transform: scale(1);

30%
background-color: green;
transform: scale(1.5);

60%
background-color: blue;
transform: scale(0.5);

100%
background-color: yellow;
transform: scale(1);



<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="manualAnim"></div>
<div class="manualAnim2"></div>
<div class="manualAnim3"></div>

I Googled a few hours days for now, but I have no clue what could be the problem.
Any idea?

This question has not received enough attention.

A true challenge to find out why it does not work! Please help me, I am giving away nearly all of my reputation!

1 Answer
1

You need to add the animation webkit to your code and css for Safari

-webkit-animation

-webkit-animation-delay

-webkit-animation-duration

-webkit-animation-play-state

@-webkit-keyframes

I already checked this solution, it does not help. I use autoprefixer on codepen, also setting the webkit version here as dom.style.webkitAnimationDelay see here: codepen.io/erikputz/pen/BPwdgN?editors=0111
– Erik Putz
7 hours ago

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.