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

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

CSS3 アニメーションでは、要素をスケーリングすると、変換によって要素が中心からずれることがあります。 -origin プロパティが正しく構成されていません。この問題に対処し、アニメーション全体で要素が確実に中央に配置されるようにする方法は次のとおりです。

原点を中央に保持する鍵は、アニメーションの変換プロパティ内に元の変換 (つまり、中心点) を含めることです。 。これは、新しい変換を適用すると以前の変換がオーバーライドされるためです。翻訳を追加することで、要素の初期位置が維持されます。

調整された 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;
  }
}

.to-animate {
  transform: translate(-50%, -50%); /* Maintains the original position */
}

この調整により、要素はスケーリング アニメーション中に中心位置を維持し、確実に配置されます。原点 (青い四角形) が他のコンテナー (赤い四角形) の中心と位置合わせされたままであること。

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