Dfyjkt

I'm trying to animate a list of elements to slide in one after the other when rendered into the page.

Everything works well in Chrome and Firefox, even in Safari 11 work well, but safari 12 is not doing the animation well.

As shown in the following image, all items should be aligned to the top when the animation is completed, but for some reason only in Safari 12, the items are randomly rendered. In addition to that, the mouse over on the button is off.

You can take a look at the problem here: https://codepen.io/crysfel/pen/GwoQxE (Make sure to open the link with safari 12)

I think the css is pretty standard:

@keyframes slideIn 
 from 
 opacity: 0;
 transform: translateY(60px);
 
 to 
 opacity: 1;
 transform: translateY(0);
 


.slide-in 
 opacity:0;
 transform: translateY(60px);
 animation: slideIn ease 1;
 animation-fill-mode: forwards;
 animation-duration: 175ms;

And a simple javascript to animate the items one after the other:

function animateIn() 
 $('ul li').each(function(index) 
 $(this).removeClass('slide-in');
 setTimeout(() => 
 $(this).addClass('slide-in');
 , 50 * index)
 )



$(() => 

 animateIn();

 $('#show').click(function() 
 animateIn(); 
 );
);

You probably need to add a prefix to keyframes and animation for safari. Use something like this:

@keyframes slideIn 
 from 
 opacity: 0;
 transform: translateY(60px);
 
 to 
 opacity: 1;
 transform: translateY(0);
 


@-webkit-keyframes slideIn 
 from 
 opacity: 0;
 -webkit-transform: translateY(60px);
 
 to 
 opacity: 1;
 -webkit-transform: translateY(0);
 

.slide-in 
 opacity:0;
 transform: translateY(60px);
 -webkit-transform: translateY(60px);
 animation: slideIn ease 1;
 -webskit-animation: slideIn ease 1;
 animation-fill-mode: forwards;
 -webkit-animation-fill-mode: forwards;
 animation-duration: 175ms;
 -webkit-animation-duration: 175ms;
 

A helpful tool to use is shouldiprefix.com