CSSでぱらぱらマンガ風アニメーション(2コマ・４コマ)

ウェブページのワンポイントに、ちょっとした画像のアニメーションがあるとかわいいですよね。
JSで画像を切り替えるのもいいですが、どうせならCSSがいい。ということでCSSで実装しました。
clissさんのサイトを一部参考にしております。

２コマ切替アニメ編

こんな、目がぱちぱち動くかわいいアニメーションを作ってみましょう。
これは２コマの画像でできています。

HTML
<p class="change_img bl_gif_product">
  <img src="https://......png" alt="">
  <img src="https://......png" alt="">
</p>

CSS
.change_img {
  width: 190px;
  height: 190px;
  position: relative;
}

.change_img img {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: tikutaku 2s linear infinite 0s forwards;
          animation: tikutaku 2s linear infinite 0s forwards;
}

.change_img img:nth-child(1) {
  z-index: 2;
  visibility: visible;
}

.change_img img:nth-child(2) {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
  z-index: 0;
  visibility: hidden;
}

@-webkit-keyframes tikutaku {
  0% {
    visibility: visible;
    z-index: 2;
  }
  50.5% {
    visibility: visible;
    z-index: 2;
  }
  51% {
    visibility: hidden;
    z-index: 0;
  }
  100% {
    visibility: hidden;
    z-index: 0;
  }
}

@keyframes tikutaku {
  0% {
    visibility: visible;
    z-index: 2;
  }
  50.5% {
    visibility: visible;
    z-index: 2;
  }
  51% {
    visibility: hidden;
    z-index: 0;
  }
  100% {
    visibility: hidden;
    z-index: 0;
  }
}

２枚重ねた画像をcssのアニメーションで切り替えてるだけなんですが、
safariでアニメーションが点滅したみたいな動作になってしまい、けっこう時間を食いました・・・
解決したのは、animation-delay: -1s;の部分。マイナス秒になってるんですが、単純にマイナスをつけただけで理想の動作になりました。なぜかはわかりません。

４コマ切替アニメ編

次は４コマです。こちらはなぜかマイナスをつけなくてもsafariでちかちかしませんでした。

HTML
<div id="TestLoading">
      <img src="img/svg/Loading_01.svg" alt="">
      <img src="img/svg/Loading_02.svg" alt="">
      <img src="img/svg/Loading_03.svg" alt="">
      <img src="img/svg/Loading_04.svg" alt="">
 </div>

CSS
#TestLoading {
  position: relative;
  width: 150px;
  height: 150px;
}
#TestLoading img {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: coma4 1s linear infinite 0s forwards;
          animation: coma4 1s linear infinite 0s forwards;
}

#TestLoading img:nth-child(1) {
  z-index: 1001;
  visibility: visible;
}

#TestLoading img:nth-child(2) {
  -webkit-animation-delay: 0.25s;
          animation-delay: 0.25s;
  z-index: 0;
  visibility: hidden;
}

#TestLoading img:nth-child(3) {
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  z-index: 0;
  visibility: hidden;
}

#TestLoading img:nth-child(4) {
  -webkit-animation-delay: 0.75s;
          animation-delay: 0.75s;
  z-index: 0;
  visibility: hidden;
}
@-webkit-keyframes coma4 {
  0% {
    visibility: visible;
    z-index: 1001;
  }
  12.5% {
    visibility: visible;
    z-index: 1001;
  }
  25% {
    visibility: hidden;
    z-index: 0;
  }
  100% {
    visibility: hidden;
    z-index: 0;
  }
}

@keyframes coma4 {
  0% {
    visibility: visible;
    z-index: 1001;
  }
  12.5% {
    visibility: visible;
    z-index: 1001;
  }
  25% {
    visibility: hidden;
    z-index: 0;
  }
  100% {
    visibility: hidden;
    z-index: 0;
  }
}

できたコードだけ見ると簡単そうなんですが、ちょっと自分好みに変えようとすると一気に挙動がおかしくなるんですよね。。
苦手だー。