CSS3 のスケーリング アニメーション中に画像を中央に保つにはどうすればよいですか?

アニメーション中に画像を中央に配置する方法は?

提供したフィドルに示されているような状況では、CSS3 アニメーションが要素を中心にある別の要素の絶対位置でスケールすると、アニメーション中に要素の位置がずれる可能性があります。具体的には、フィドル内の赤い四角で示されているように、中心からずれて表示される可能性があります。

これを修正するには、transform-origin プロパティを変更します。この問題は、(アニメーション内の) 新しい変換が元の変換をオーバーライドするときに発生します。この場合、元の変換は要素の中央揃えを維持する役割を果たします。

この問題を回避するには、同じ変換プロパティ内で変換を結合し、正しい順序を確保する必要があります。次のコードは、修正されたアプローチを示しています:

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

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