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.

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>