Web アニメーション中にスケールされた要素が中心からずれるのはなぜですか?それを修正するにはどうすればよいですか?

スケール アニメーション中に画像の原点を維持する方法

Web アニメーションで、別の要素内に絶対的に配置されている要素をスケールすると、スケールされた要素が中心からずらします。これは、スケールされた要素を表す赤い四角形がアニメーション中に中心 (青い四角形で表される) から離れる場合に観察できます。

問題の原因

この問題は、アニメーションの変換プロパティが前の変換変換をオーバーライドするために発生します。これにより、要素の中央揃えを維持する変換が削除されます。

解決策

これを解決するには、同じ変換プロパティで変換を結合し、正しい

@keyframes ripple_large {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  75% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

.to-animate {
  transform: translate(-50%, -50%);
}

説明

変換を組み合わせると、アニメーション全体で変換が維持され、その上でスケール変換が適用されます。これにより、要素が中心からずれることなく拡大縮小できます。この場合、transform-origin プロパティは機能しません。

更新された HTML:

<div>

以上がWeb アニメーション中にスケールされた要素が中心からずれるのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。