ホームページ > 記事 > ウェブフロントエンド > コンテナ内の Div の左右のスムーズな CSS アニメーションを作成するにはどうすればよいですか?
左右移動用の汎用 CSS アニメーション
この記事では、div を左に移動する汎用 CSS アニメーションの作成について説明します。そして右に、コンテナの端に達します。このアニメーションは、不明な長さに関係なく、絶対位置を指定して任意の div に適用できます。
問題: left を直接使用すると一時的に消える
最初は left を使用します。 0% と 100% では、移動中に div が一時的に消える可能性があります。これは、100% の場合、div の left プロパティがコンテナの幅をオーバーシュートし、負の値と画面外の位置につながるためです。
より流動的なソリューション: Transform と Left の混合
この問題に対処し、スムーズで直線的な動きを実現するために、transform を導入します。これにより、現在の位置を基準にして div を移動でき、コンテナの境界を超えないようにすることができます。
transform を使用したアニメーションの更新バージョンは次のとおりです。
@keyframes destraSinistra { 0% { left: 0; } 100% { left: 100%; transform: translateX(-100%); } } #div1 { /* ... */ animation: destraSinistra 1s linear infinite alternate; }
この中でコードでは、キーフレームが 100% で左と変換の両方が使用されます。 Left は div を右端に移動し、transform はオーバーシュートを補正するために div をさらに左に移動します。この組み合わせにより、div が画面外になるのを効果的に防止できます。
以上がコンテナ内の Div の左右のスムーズな CSS アニメーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。