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