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

拡大縮小中に画像の中心を一定に保つ方法

CSS アニメーションを使用して要素を拡大縮小する場合、中心位置を維持することが重要です。ただし、特定のシナリオでは、提供されたフィドルに示されているように、スケーリングされた要素が中心からずれることがあります。

根本的な問題は、元の変換変換をオーバーライドするアニメーションから発生します。アニメーション内で新しい変換を指定すると、初期位置が無視され、中央揃えに必要な変換が削除されます。

これを修正するには、同じプロパティ内で両方の変換を組み合わせて、正しい順序を確保することが重要です: 初期移動の後にスケーリングアニメーションが続きます。以下の更新されたコード スニペットは、このアプローチを示しています。

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

この順序に従うことで、要素はスケール アニメーション全体にわたって正確に中央に維持され、親要素に対する相対的な意図された位置が維持されます。

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