コンテナ内の 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 サイトの他の関連記事を参照してください。