Multiple keyframe animations not working in safari - html

Question

I'm working with HTML5 banner having a lot of CSS3 animation. To make reusable keyframe animation I'm using multiple animation on single element. It's working perfectly except safari.
CSS:
.text1 {
-webkit-animation: fadeOutRight 1s 3s forwards;
animation: fadeOutRight 1s 3s forwards;
}
.text2 {
-webkit-animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
animation: fadeInLeft 1s 4s both, fadeOutRight 1s 7s forwards;
}
.text3 {
-webkit-animation: fadeInLeft 1s 8s both;
animation: fadeInLeft 1s 8s both;
}
/* fadeInLeft */
#-webkit-keyframes fadeInLeft {
0% { -webkit-transform: translateX(-100px); opacity: 0; }
100% { -webkit-transform: translateX(0px); opacity: 1; }
}
#keyframes fadeInLeft {
0% { transform: translateX(-100px); opacity: 0; }
100% { transform: translateX(0px); opacity: 1; }
}
/* fadeOutRight */
#-webkit-keyframes fadeOutRight {
0% { -webkit-transform: translateX(0px); opacity: 1; }
100% { -webkit-transform: translateX(100px); opacity: 0; }
}
#keyframes fadeOutRight {
0% { transform: translateX(0px); opacity: 1; }
100% { transform: translateX(100px); opacity: 0; }
}
jsfiddle link
Workable solutions:
Wrap the element with another/more element & add single animation to each element. This solution needs extra styling for wrapper element.
Merge multiple animation into one & this solution increase the complexity of the keyframes rule and it's not easily maintainable for complex animation.
According to accepted answer of another stackOverflow post –
You cannot animate same attribute more than once, on a same element, the last one will overwrite other.
It’s only true for safari in my case & first animation is only running not
second one. If I don’t animate same property on multiple animation
then it’s also fine for safari(jsfiddle). This one is not
suitable for me because I will need to animate same property in
multiple animations.
Note:
Although I'm using multiple animation on same element but I'm not animating at same time, there is delay between each animation.
Question:
Is it possible to use multiple CSS3 animation on same element regardless of animating property?

Answer 1

For some reason, Safari does not read trough the shorthand method for describing the animation, for example:
animation: test 1s 2s 3 alternate backwards
It needs to be described more detailed with its separate properties listed:
.class{
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}