Safari Animation ‘Sticks’ until javascript animation stops

[the14thgod]

This is my first time working with CSS3 animations and I’ve come across a real big bump in the road. At this rate it looks like I’m going to have to replace all the CSS animations with jQuery ones instead.

Here’s the link:
*link removed*

Basically once you click any other slide the currently active slide stays through the scroll and then disappears once it finishes animating down.

It works fine in Chrome/Firefox so it seems like it has to be Safari related.

Thanks for any and all help,
Justin

[Mikefmi]

Would you mind pasting the code?

[the14thgod]

Sure, there’s a decent amount of it though… if you want to whole test stylesheet let me know, here are just the animations:

*Correction*
Apparently too much code to put in… so I just pasted in the first slides code, unless I’m missing something you may have to view the code on the site :(
JS:

var activeSlide = 1;

$('#slider_nav a').click(function(){

var txt = parseInt($(this).text());

activeSlide = txt;

$('#slider_nav a').removeClass('active');

$(this).addClass('active');



$('#slider_nav').animate({

top: (1000 * (txt-1)) + 353

}, 750, 'easeInOutQuad' );



$('#scroller').animate({

top: -1000 * (txt-1)

}, 750, 'easeInOutQuad', function(){

if(!$('.slide0'+txt).hasClass('active')){

$('.slide0'+txt).addClass('active');

}

});

});

CSS:

/*

/

CSS3 Animation Selectors & keyframes

*/

/*Positions for circles */

#circle01_mask{

top:-246px;

right:-127px;

}

#circle01_mask.pos2{top:754px;}

#circle01_mask.pos3{top:1754px;}

#circle01_mask.pos4{top:1754px;}

#circle02_mask{

top: 171px;

left: -181px;

}

#circle02_mask.pos2{top:819px;}

#circle03_mask.pos3{top:1819px;}

#circle04_mask.pos4{top:2819px;}



#circle01_mask,

#circle02_mask,

.slide01 .main_img,

.slide01 .content{

-webkit-transition: all ease;

-moz-transition: all ease;

-ms-transition: all ease;

-o-transition: all ease;

transition: all ease;

}

#circle01_mask,#circle02_mask.active{

/* Reset default rotation + z-index*/

z-index:1;

transform: rotate(0deg);

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);



/* https://css-tricks.com/snippets/css/webkit-keyframe-animation-syntax/ */

/* animationName duration delay iterations fill */

animation: circle01-mask 2s 0s 1 forwards,circle01-hidemask 1s 2s 1 forwards;

-moz-animation: circle01-mask 2s 0s 1 forwards,circle01-hidemask 1s 2s 1 forwards; /* Firefox */

-webkit-animation: circle01-mask 2s 0s 1 forwards,circle01-hidemask 1s 2s 1 forwards; /* Safari and Chrome */

}

/* Animation: circle01-mask */

@keyframes circle01-mask{

0%{ transform: rotate(0deg); }

100%{ transform: rotate(-180deg); }

}

@-moz-keyframes circle01-mask{

0%{ -moz-transform: rotate(0deg); }

100%{ -moz-transform: rotate(-180deg); }

}

@-webkit-keyframes circle01-mask{

0%{ -webkit-transform: rotate(0deg); }

100%{ -webkit-transform: rotate(-180deg); }

}

/* Animation: circle01-hidemask */

@keyframes circle01-hidemask{

0%{z-index: 1;}

100%{z-index:-10;}

}

@-moz-keyframes circle01-hidemask{

0%{z-index: 1;}

100%{z-index:-10;}

}

@-webkit-keyframes circle01-hidemask{

0%{z-index: 1;}

100%{z-index:-10;}

}





#circle02_mask,#circle02_mask.active{

/* Reset default rotation + z-index*/

z-index:1;

transform: rotate(0deg);

-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);



animation: circle02-mask 2s 0s 1 forwards,circle02-hidemask 1s 2s 1 forwards;

-moz-animation: circle02-mask 2s 0s 1 forwards,circle02-hidemask 1s 2s 1 forwards; /* Firefox */

-webkit-animation: circle02-mask 2s 0s 1 forwards,circle02-hidemask 1s 2s 1 forwards; /* Safari and Chrome */

}

/* Animation: circle02-mask */

@keyframes circle02-mask{

0%{ transform: rotate(0deg); }

100%{ transform: rotate(-150deg); }

}

@-moz-keyframes circle02-mask{

0%{ -moz-transform: rotate(0deg); }

100%{ -moz-transform: rotate(-150deg); }

}

@-webkit-keyframes circle02-mask{

0%{-webkit-transform: rotate(0deg); }

100%{ -webkit-transform: rotate(-150deg); }

}

/* Animation: circle02-hidemask */

@keyframes circle02-hidemask{

0%{z-index: 1;}

100%{z-index:-10;}

}

@-moz-keyframes circle02-hidemask{

0%{z-index: 1;}

100%{z-index:-10;}

}

@-webkit-keyframes circle02-hidemask{

0%{z-index: 1;}

100%{z-index:-10;}

}





.slide01 .main_img{

animation: slide01-img 2s .5s 1 forwards;

-moz-animation: slide01-img 2s .5s 1 forwards; /* Firefox */

-webkit-animation: slide01-img 2s .5s 1 forwards; /* Safari and Chrome */

}

/* Slide 01 Main Image Animation */

@keyframes slide01-img{

0%{

opacity: 0;

bottom: -495px;

}

100%{

opacity: 1;

bottom: -40px;

}

}

@-moz-keyframes slide01-img{

0%{

opacity: 0;

bottom: -495px;

}

100%{

opacity: 1;

bottom: -40px;

}

}

@-webkit-keyframes slide01-img{

0%{

opacity: 0;

bottom: -495px;

}

100%{

opacity: 1;

bottom: -40px;

}

}

.slide01 .content{

animation: slide01-content 1.5s 1s 1 forwards;

-moz-animation: slide01-content 1.5s 1s 1 forwards; /* Firefox */

-webkit-animation: slide01-content 1.5s 1s 1 forwards; /* Safari and Chrome */

}

@keyframes slide01-content{

0%{

opacity: 0;

bottom: 100px;

}

100%{

opacity: 1;

bottom: 40px;

}

}

@-moz-keyframes slide01-content{

0%{

opacity: 0;

bottom: 100px;

}

100%{

opacity: 1;

bottom: 40px;

}

}

@-webkit-keyframes slide01-content{

0%{

opacity: 0;

bottom: 100px;

}

100%{

opacity: 1;

bottom: 40px;

}

}	}

[the14thgod]

I ended up switching to JS, thanks anyway.
Justin

[Author]

Posts