🧊

AndroidでCssのアニメーションが消えることがある

既知の不具合かどうかもわかりませんが、少なくとも実体験です。
一応、参考までに。
Androidの2.x系です。←うろ覚え

ソース

なんてことのないブリンクをCssのアニメーションで実装しました。

.blink {
  -webkit-animation-name: blink;
  -webkit-animation-duration: .8s;
  -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0);
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes blink {
  0%   {opacity:0}
  100% {opacity:1}
}

永遠にチカチカする、いわゆるブリンク効果です。

一定期間アニメーションの後、効果が消える

これはもう言葉でしか書けませんが、一定回数アニメーションした後に効果が消えます。

解決策

どういう理屈かはわかりませんが、いろいろ探ってわかったのは、アニメーションで設定した初期時で終わるということ。
今回の指定ではopacityが0なので、要素が見えなくなります・・。

つまり

@-webkit-keyframes blink {
  0%   {opacity:0}
  100% {opacity:1}
}

ではなく、

@-webkit-keyframes blink {
  0%   {opacity:1}
  100% {opacity:0}
}

とすれば解決。

なんでかはほんとにわかりませんが、アニメーションが0％の状態で終わる場合があるので、0％の設定：初期状態に注意しましょうということで・・。