Multiple keyframe animations not working in safari

Question

I am working with an HTML5 banner that has a lot of CSS3 animations. To make multiple keyframe animations, I use several animations for a single element. It works great 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

Working solutions:

• Wrap the element with another element and add a separate animation to each element. This solution requires additional style for the wrapping element.
• Combining several animations into one and this solution increases the complexity of the keyframes rule and is not easy to maintain for complex animations.
• According to the accepted answer of another message, https://stackoverflow.com/a/166958/ - You cannot animate same attribute more than once, on a same element, the last one will overwrite other . Its only true value for safari in my case and the first animation works only not the second. If I do not animate the same property in multiple animations, then this is also great for jsfiddle . This is not suitable for me, because I will need to animate the same property in several animations.

Note:

Although I use several animations for the same element, but at the same time I am not an animation, there is a delay between each animation.

Question:

Can I use multiple CSS3 animations for a single element, regardless of the property animation?

Answer 1

Yes, you can have multiple animations in one element, separated by commas, as you already did in the question.

 animation: fadeOutRight 1s, fadeInLeft 2s; 

But you cannot use the same properties for these animations, or the cascading rule will be overwritten.

As you said, the only solutions for the last point are wrapping or combining animations.

The animation documentation does not indicate rewriting using forwards, backward, or both using the same property.

https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

The target will save the calculated values ​​set by the last (or first or both) keyframes encountered at run time. The last keyframe depends on the direction value of the animation and animation-iteration-count