iOS SafariでCSS3のアニメーションがチラつく

Question

css3でアニメーションを設定しましたが、アニメーションがカクカクしたり、関係ない要素がチラついたりします。
調べてみて一通り試してみたのですが治りませんでした。

Vue.jsで作っています。
よろしくお願いします。

<template>
  ...
  // 同じ要素が複数存在し、同時にアニメーションされます。
   <span class="circle circle-anime"></span>
  ...
</template>

<style lang="scss">
.circle {
      display: block;
      position: absolute;
      background-color: #fff;
      border-radius: 50%;
    }

.circle-anime {
          width: 56px;
          height: 56px;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          margin: auto;
          animation: sizeScaleAndDisappear 3s ease-out 1s forwards infinite;
          -webkit-animation: sizeScaleAndDisappear 3s ease-out 1s forwards infinite;
          -webkit-backface-visibility: hidden; // 調べて追記した部分　効果出ず
          backface-visibility: hidden; // 調べて追記した部分　効果出ず
          will-change: animation; // 調べて追記した部分　効果出ず
        }

@keyframes sizeScaleAndDisappear {
        0% {
          width:28px;
          height: 28px;
          opacity: 1;
          transform: translate3d(0, 0, 0);
        }
        30% {
          width: 120px;
          height: 120px;
          opacity: 0;
          transform: translate3d(0, 0, 0);
        }

        100% {
          opacity: 0;
          transform: translate3d(0, 0, 0);
        }
</style>

Answer 1

関係ない要素がチラついたり

このチラつくという現象については「関係ない要素」のソースを質問者さんが開示してませんので確認できませんでしたが、「カクカクする」という点についてはより良い状態と思われる書き方があるので以下を試されることをおすすめします。

.circle-anime {
  ...

  // 1. GPUレンダリングを有効にして、アニメーションを滑らかに行えるように指定
  // 2. いくつかのブラウザでCSS Transformがチラつく場合がある問題を解消
  transform: translate3d(0, 0, 0);  // 1.
  animation: sizeScaleAndDisappear 3s ease-out 1s forwards infinite;
  will-change: transform;  // 1.
  backface-visibility: hidden;  // 2.
}

@keyframes sizeScaleAndDisappear {
  // 拡大・縮小は scale() で処理させる
  // （width/heightよりもtransformで処理させる方が滑らかになるため）
  0% {
    opacity: 1;
    transform: scale(.5);  // 元サイズを１とした好みの拡大・縮小割合
  }
  30% {
    opacity: 0;
    transform: scale(2.142857);  // 元サイズを１とした好みの拡大・縮小割合
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}

各プロパティの意味はソースコードコメントに書いた通りで、まず translate3d() は何の変化もしないのでキーフレームごとに書かれてる必要はありません。ですが、CSSアニメーションのGPUレンダリングを有効にするために必要になるケースもあるので .circle-anime の方に移します。

そして、各キーフレームのcircleサイズの変化を質問者さんはwidth/heightで書いてましたが scale() でやる方が滑らかになるので、scaleに行わせるようにします。

※-webkit- のベンダープレフィックス付きプロパティはCan I useなどでご自身のプロジェクトのターゲットブラウザなどを確認し適宜付与してください。iOS 9.0以上、Android 5以上であれば書かなくてもいいはずです。