CSS Keyframes doesnt work in Safari yet works in Chrome

[SlegaitisT]

Hi Guys,

Very quick question, So I have written some css keyframes using SASS. All works perfect on every other browser but Safari. Could anybody please point me to the right direction what am I doing wrong as I’m loosing hope here… Reviewed my code 100 times… Which could be part of the reason…

So what I have is lets say 6 boxes that are meant to slide in from different directions.

Here is HTML:

<div class="main-menu">
			<div class="wrapper">
				<nav>
					<!-- Add Classes Top, Left, Right or Bottom on li for the direction to slide in -->
					<ul class="navigation">
						<li class="right">
							<span class="icon-box">
								<span class="icon-home"></span>
							</span>
							<a href="#">Home</a>
						</li>
						<li class="bottom">
							<span class="icon-box">
								<span class="icon-about"></span>
							</span>
							<a href="#">About</a>
						</li>
						<li class="left">
							<span class="icon-box">
								<span class="icon-archive"></span>
							</span>
							<a href="#">Archive</a>
						</li>
						<li class="right">
							<span class="icon-box">
								<span class="icon-products"></span>
							</span>
							<a href="#">Products</a>
						</li>
						<li class="top">
							<span class="icon-box">
								<span class="icon-prices"></span>
							</span>
							<a href="#">Prices</a>
						</li>
						<li class="left">
							<span class="icon-box">
								<span class="icon-contact"></span>
							</span>
							<a href="#">Contact</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>

My Sass mixin:

    @mixin animation($value, $time, $effect) {
    	-webkit-animation: #{$value} $time $effect;
    	-moz-animation: #{$value} $time $effect;
    	-ms-animation: #{$value} $time $effect;
    	-o-animation: #{$value} $time $effect;
    	animation: #{$value} $time $effect;    
    }
    
    /* Keyframes with browser specific prefixes */
    @mixin prefixKeyframes($animationName) {
        @-webkit-keyframes #{$animationName} {
            $browser: '-webkit-'; @content;
        }
        @-moz-keyframes #{$animationName} {
            $browser: '-moz-'; @content;
        }
        @-o-keyframes #{$animationName} {
            $browser: '-o-'; @content;
        }
        @keyframes #{$animationName} {
            $browser: ''; @content;
        }
    } $browser: null;
    
    
    /* USAGE for above Keyframes with Browser specific prefixed 
    	 
    
    @include keyframe('slide-in-left') {
    	0% { #{$browser}transform: translateX(-200px); }
    }
    
    
    */
    
    
    /* Transform Origin */
    @mixin transform-origin($value1, $value2){
    	-moz-transform-origin: $value1 $value2;
    	-o-transform-origin: $value1 $value2;
    	-ms-transform-origin: $value1 $value2;
    	-webkit-transform-origin: $value1 $value2;
    	transform-origin: $value1 $value2;
    }

And Actual sass keyframes: 
/* Keyframes, PLEASE CHECK MIXINS FILE for required mixins */

@include prefixKeyframes('slide-in-left') {
	0% { #{$browser}transform: translateX(-700px); }
	10% { #{$browser}transform: translateX(-600px); }
	15% { #{$browser}transform: translateX(-500px); }
	20% { #{$browser}transform: translateX(-400px); }
	25% { #{$browser}transform: translateX(-300px); }
	30% { #{$browser}transform: translateX(-250px); }
	35% { #{$browser}transform: translateX(-200px); }
	40% { #{$browser}transform: translateX(-150px); }
	45% { #{$browser}transform: translateX(-125px); }
	50% { #{$browser}transform: translateX(-100px); }
	55% { #{$browser}transform: translateX(-90px); }
	60% { #{$browser}transform: translateX(-80px); }
	65% { #{$browser}transform: translateX(-60px); }
	70% { #{$browser}transform: translateX(-50px); }
	75% { #{$browser}transform: translateX(-40px); }
	80% { #{$browser}transform: translateX(-30px); }
	85% { #{$browser}transform: translateX(-20px); }
	90% { #{$browser}transform: translateX(-10px); }
	95% { #{$browser}transform: translateX(-5px); }
	100% { #{$browser}transform: translateX(0px); }
}

@include prefixKeyframes('slide-in-right') {
	0% { #{$browser}transform: translateX(700px); }
	10% { #{$browser}transform: translateX(600px); }
	15% { #{$browser}transform: translateX(500px); }
	20% { #{$browser}transform: translateX(400px); }
	25% { #{$browser}transform: translateX(300px); }
	30% { #{$browser}transform: translateX(250px); }
	35% { #{$browser}transform: translateX(200px); }
	40% { #{$browser}transform: translateX(150px); }
	45% { #{$browser}transform: translateX(125px); }
	50% { #{$browser}transform: translateX(100px); }
	55% { #{$browser}transform: translateX(90px); }
	60% { #{$browser}transform: translateX(80px); }
	65% { #{$browser}transform: translateX(60px); }
	70% { #{$browser}transform: translateX(50px); }
	75% { #{$browser}transform: translateX(40px); }
	80% { #{$browser}transform: translateX(30px); }
	85% { #{$browser}transform: translateX(20px); }
	90% { #{$browser}transform: translateX(10px); }
	95% { #{$browser}transform: translateX(5px); }
	100% { #{$browser}transform: translateX(0px); }
}

@include prefixKeyframes('slide-in-bottom') {
	0% { #{$browser}transform: translateY(700px); }
	10% { #{$browser}transform: translateY(600px); }
	15% { #{$browser}transform: translateY(500px); }
	20% { #{$browser}transform: translateY(400px); }
	25% { #{$browser}transform: translateY(300px); }
	30% { #{$browser}transform: translateY(250px); }
	35% { #{$browser}transform: translateY(200px); }
	40% { #{$browser}transform: translateY(150px); }
	45% { #{$browser}transform: translateY(125px); }
	50% { #{$browser}transform: translateY(100px); }
	55% { #{$browser}transform: translateY(90px); }
	60% { #{$browser}transform: translateY(80px); }
	65% { #{$browser}transform: translateY(60px); }
	70% { #{$browser}transform: translateY(50px); }
	75% { #{$browser}transform: translateY(40px); }
	80% { #{$browser}transform: translateY(30px); }
	85% { #{$browser}transform: translateY(20px); }
	90% { #{$browser}transform: translateY(10px); }
	95% { #{$browser}transform: translateY(5px); }
	100% { #{$browser}transform: translateY(0px); }
}

@include prefixKeyframes('slide-in-top') {
	0% { #{$browser}transform: translateY(-700px); }
	10% { #{$browser}transform: translateY(-600px); }
	15% { #{$browser}transform: translateY(-500px); }
	20% { #{$browser}transform: translateY(-400px); }
	25% { #{$browser}transform: translateY(-300px); }
	30% { #{$browser}transform: translateY(-250px); }
	35% { #{$browser}transform: translateY(-200px); }
	40% { #{$browser}transform: translateY(-150px); }
	45% { #{$browser}transform: translateY(-125px); }
	50% { #{$browser}transform: translateY(-100px); }
	55% { #{$browser}transform: translateY(-90px); }
	60% { #{$browser}transform: translateY(-80px); }
	65% { #{$browser}transform: translateY(-60px); }
	70% { #{$browser}transform: translateY(-50px); }
	75% { #{$browser}transform: translateY(-40px); }
	80% { #{$browser}transform: translateY(-30px); }
	85% { #{$browser}transform: translateY(-20px); }
	90% { #{$browser}transform: translateY(-10px); }
	95% { #{$browser}transform: translateY(-5px); }
	100% { #{$browser}transform: translateY(0px); }
}

/* SVG Burger Transformation to X */

@include prefixKeyframes('rotate45'){
	20% { #{$browser}transform: rotate(5deg); }
	40% { #{$browser}transform: rotate(20deg); }
	60% { #{$browser}transform: rotate(30deg); }
	80% { #{$browser}transform: rotate(40deg); }
	100% { #{$browser}transform: rotate(45deg); }
}

@include prefixKeyframes('rotate-45'){
	20% { #{$browser}transform: rotate(-5deg); }
	40% { #{$browser}transform: rotate(-20deg); }
	60% { #{$browser}transform: rotate(-30deg); }
	80% { #{$browser}transform: rotate(-40deg); }
	100% { #{$browser}transform: rotate(-45deg); }
}

@include prefixKeyframes('rotate-0'){
	0% { #{$browser}transform: rotate(0); }
	100% { #{$browser}transform: rotate(0); }
}




.left {
					@include animation(slide-in-left, 0.7s, forwards);
				}
				
				.right {
					@include animation(slide-in-right, 0.8s, forwards);
				}
				
				.bottom {
					@include animation(slide-in-bottom, 0.8s, forwards);
				}
				
				.top {
					@include animation(slide-in-top, 0.7s, forwards);
				}

[RyanReese]

Windows Safari or Mac?

Also is this live anywhere? Perhaps throw this into a codepen maybe if it isn’t live?

[SlegaitisT]

Hey,

Sure see below:

Here is the link

[RyanReese]

I tried writing a coherent post but that’s not working for me at the moment.

Perhaps this thread can shed some light.

Keyframe animation not working in Safari?

Hi I have a keyframe animation that works just fine in firefox and chrome, but wont start in Safari for some reason. Here is my code (I am using autoprefixer, hence the lack of vendorprefixes). <svg id="one" width="50" height="50" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="copy-1" class="group"> <g class="large"> <path id="large" d="M41.25,40 L42.5,10 L43.75,40 L45,41.25 L75,42.5 L45,43.75 L43.75,45 L42.5,75 L41.25,4…