CSS3 スケール アニメーション中に絶対に配置された要素を中央に保つにはどうすればよいですか?

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

CSS3 アニメーションを使用して、別の要素の絶対的に中心に配置された要素をスケールする場合、結果として生じるアニメーションは中心からずれて表示される場合があります。この不一致は、アニメーションが要素を中央に配置する初期変換をオーバーライドするために発生します。

この問題を解決し、スケール アニメーション中に原点が中央に位置するようにするには、次のことが重要です。

1. 変換を組み合わせる: 最初の変換をオーバーライドするのではなく、アニメーション内のスケール変換と組み合わせます。これにより、拡大縮小しながら要素を中央に配置したままにすることができます。
2. 順序を正しく指定します: 変換の順序に注意してください。目的の位置合わせを維持するには、変換をスケール変換の前に行う必要があります。

更新された例:

@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;
  }
}

.center-point {
  transform: translate(-50%, -50%) scale(0);
}

これらの変更により、スケーリング アニメーションは正しく維持されます。親コンテナ内の要素の中心位置。

以上がCSS3 スケール アニメーション中に絶対に配置された要素を中央に保つにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。