CSS Keyframes doesnt work in Safari yet works in Chrome

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);
				}

Windows Safari or Mac?

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

Hey,

Sure see below:

Here is the link

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

Perhaps this thread can shed some light.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.