親要素の中心を基点としたcssアニメーション

Question

円の中にアイコンがあり、クリックするとactiveクラスが追加されアニメーションが開始されます。
（円だけが中心に小さくなっていき、消えた後再び中心から現れる）

PCやAndoroidでは上手く表示されたのに、Iphone7では右下に消えていきます。。
検索ヒットしたtransform-origin:50% 50%;なども効きませんでした

解決法、原因の調べ方など検討つくかた、ぜひ教えていただければと思います！
よろしくお願いいたします。

<div class="reaction">
  <div class="button heart_b">
    <div id="v_love_stamp" class="outline"><div class="stamp"></div>
　    <span class="far fa-heart"></span>
    </div>
  </div>
  <div class="button nice_b">
    <div id="v_good_stamp" class="outline"><div class="stamp"></div>
      <span class="far fa-thumbs-up"></span>
    </div>
  </div>
</div>

.reaction .button {
  display: inline-block;
  margin: 0 4%;
}
.button .outline {
  display: block;
  width: 100px;
  height: 100px;
  color: #fff;
  position: relative;
}
.stamp{
  width: 100%;
  height: 100%;
  background: orange;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform-origin:50% 50%;
}
.button .active .stamp{
  animation: stamp linear 1.4s;
  -webkit-animation: stamp linear 1.4s;
}
@keyframes stamp {
  25%{
    transform:translate(-50%, -50%) scale(0);
    -webkit-transform:translate(-50%, -50%) scale(0);
  }
  70%{
    transform:translate(-50%, -50%) scale(0);
    -webkit-transform:translate(-50%, -50%) scale(0);
  }
  85%{
    transform:translate(-50%, -50%) scale(1.3);
    -webkit-transform:translate(-50%, -50%) scale(1.3);
  }
  90%{
    transform:translate(-50%, -50%) scale(1);
    -webkit-transform:translate(-50%, -50%) scale(1);
  }
}
.reaction .far{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  font-size: 6rem;
}

---

参考になるか不明ですが補足です。

@keyframes stampをscale(0.01)ではうまく真ん中に縮んでくれます。
プラスscale(0)を追加するとそこから右下に消えていきます。
また、scale(0)をwidth:0、height:0にすると左上に消えていきます。

Comments

[Lhankor_Mhy]

これが原因なのかわかりませんが、ベンダープレフィックスを後に書くのはよくないと思います。

[nana_ton]

コメントありがとうございます。
試してみましたが、以前かわらずでした。。。
ですが、知らなかったので勉強になりました！

[Lhankor_Mhy]

ああ、なるほど、つまり、iOS Safari では translate される前の center を基準にしてるんですね。
これ、どっちが正しい動作なんだろう、興味深い……

[nana_ton]

”translate される前の center”というのはanimationがスタートする前のことでしょうか？？

[Lhankor_Mhy]

いえ、translate(-50%, -50%) で左上に動かす前の中心は、動かした後の右下ですよね？
そういうことなのかなあ、と。

だから、iOS Safari では scale(0) にすると表示されるものがなくなるから演算をショートカットしていて、transform-origin の基点の演算に translate(-50%, -50%) を計算していないのかな、と思ったわけです。

[nana_ton]

なるほど、、0にする場合はscaleは使えないのですかね、、

scaleをなくし、すべてwidthとheightで指定するとうまく真ん中に消えていきました、、！
これで対処しようかと思います！ありがとうございます！

Answer 1

scale()の問題のようなので下記のように変更

@keyframes stamp {
  25%{
    width: 0;
    height: 0;
  }
  70%{
    width: 0;
    height: 0;
  }
  85%{
    width: 120%;
    height: 120%;
  }
  90%{
    width: 100%;
    height: 100%;
  }
}