Unexpected animation behaviour in safari

Question

I have chain of animations happening demonstrated below (see gif's). There is one particular animation called fadeIn that works fine on chrome and firefox, yet has this strange flashing behaviour in safari.

Here is animation code:

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.4; }
}

and here is how it is applied to element:

animation:
    .35s ease 1.35s forwards fadeIn,
    .35s ease 2s reverse forwards fadeIn;

Note all of these are auto prefixed during build process (checked and confirmed in inspector)

Example 1 (Chrome & Firefox)

Example 2 (Safari)

Any ideas on why it behaves so strange in safari?

JSFiddle: https://jsfiddle.net/9jqjssyw This demonstrates the issue, if you look in chrome it behaves fine, i.e. fades in all text initially and then fades out each line one by one with different delay. In safari, however, each line is blinked and never stays faded in.

Veneering

Answer 1

When applied like that, with 2 animations, you need to have 2 keyframes or else it won't work as you can't time the same keyframes twice. (well, Chrome tends to make all kinds of none standard things to work :)

Below sample is tested with success on Chrome/Firefox/IE11/Edge.

Additionally, you might be able to also put together an animation using the timing-function with steps, though this one with 2 keyframes is way simpler.

Updated fiddle

Stack snippet

.example {
  opacity: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: sans-serif;
  margin: 10px 0;
}

.one {
  animation:
    .35s ease 0.5s forwards fadeIn,
    .35s ease 2s forwards fadeOut;
}

.two {
  animation:
    .35s ease 0.5s forwards fadeIn,
    .35s ease 4s forwards fadeOut;
}

.three {
  animation:
    .35s ease 0.5s forwards fadeIn,
    .35s ease 6s forwards fadeOut;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 0.7; }
}
@keyframes fadeOut {
  0% { opacity: 0.7; }
  100% { opacity: 0; }
}

<div class="example one">Text 1</div>
<div class="example two">Text 3</div>
<div class="example three">Text 4</div>

Ringhals

This works! Didn't know about this caveat of animation. I will award the bounty as soon as time restriction is lifted by stack overflow. Thank you. – Veneering

In case anybody comes across the issue I had, this also applies on safari when trying to use multiple animations, for some reason each one has to be unique, Safari doesn't seem to be able to reuse keyframe animations. – Fetishism

Answer 2

I'm not a huge animation user. However, I look up a bit to your fiddle and it seems that Safari doesn't support chaining animations.

Your first "fadeIn" animation is ignored by safari and it goes straight for the second one.

See the reproduced Safari behavior when we simply delete the first animation line:

.example {
  opacity: 0;
  text-transform: uppercase;
  text-align: center;
  font-family: sans-serif;
  margin: 10px 0;
}

.one {
  animation: .35s ease 2s reverse forwards fadeIn;
}

.two {
  animation: .35s ease 4s reverse forwards fadeIn;
}

.three {
  animation: .35s ease 6s reverse forwards fadeIn;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.7;
  }
}

<div class="example one">Text 1</div>
<div class="example two">Text 3</div>
<div class="example three">Text 4</div>

Edit: Tested on IE11 and Edge, your animation process acts exactly as Safari. I guess animation chaining as you tried is not fully supported.

Suggestions would be to rethink your animation process and maybe make use of javascript.

Mestas