CSS3 animation not working only on Safari - animation

Question

I know this question has been asked many times but my animation is different.
I gave multiple animations to one element using delay. Animation works perfect on all browsers except Safari.
Apparently, Safari wants the animation to be reversed. I tried this but failed. This is some lines of the code to show how I write the animation.
//first revealed text
.has-line-anim-hidden-first {
animation-name: lineScaleOut, lineToBottom, lineToTop, lineScale;
animation-duration: $duration, $duration, $duration, $duration;
animation-delay: 1.6s, 1.9s, 3.6s, 3.9s;
animation-fill-mode: both, both, both, forwards;
animation-timing-function: ease-out, ease-out, ease-out, ease-out;
}
Keyframes:
//Mixin
#mixin keyframes ( $animation-name ) {
#-webkit-keyframes #{$animation-name} {
#content;
}
#-moz-keyframes #{$animation-name} {
#content;
}
#-o-keyframes #{$animation-name} {
#content;
}
#keyframes #{$animation-name} {
#content;
}
}
#include keyframes(reveal) {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
#include keyframes(unreveal) {
to {
opacity: 0;
}
}
#include keyframes(lineToTop) {
to {
bottom: 80%;
}
}
#include keyframes(lineToBottom) {
from {
bottom: 80%;
}
to {
bottom: 0%;
}
}
#include keyframes(lineScale) {
from {
width: 100%;
}
to {
width: 0;
}
}
#include keyframes(lineScaleOut) {
from {
width: 0;
opacity: 0
}
to {
width: 100%;
opacity: 1;
}
}
You can check all my code by clicking this
What do I need to do to make the code work on the Safari?