DIV 要素の左右のアニメーションをちらつきなくスムーズに実現するにはどうすればよいですか?

CSS での左右の動き: 普遍的なソリューション

多くの Web 開発者は、水平軸に沿って DIV 要素をアニメーション化するという課題に直面しています。容器の端で。固定値を使用すると要素が一時的に消える可能性があるため、このタスクは複雑になります。

この問題に対処するには、汎用 CSS アニメーションを使用して DIV を左から右にシームレスに移動できます。ただし、左のプロパティを 0% および 100% で使用すると、要素が画面から完全に外れるためにちらつきが発生する可能性があります。

これを解決するには、変換と左または右のプロパティを組み合わせることをお勧めします。このメソッドは、目的の動きを提供しながら画面上の要素を維持します。

たとえば、次の CSS コードはこの効果を実現します。

<code class="css">@keyframes destraSinistra {
  0% {
    left: 0;
  }
  100% {
    left: 100%;
    transform: translateX(-100%);
  }
}

#div1 {
  position: absolute;
  border: solid 1px lightgray;
  width: 100px;
  height: 30px;
  background-color: lightgreen;
  animation: destraSinistra 1s linear infinite alternate;
}</code>

この手法により、DIV は、コンテナの左端と右端を表示し、絶対位置を使用してあらゆる DIV に多用途のソリューションを提供します。

以上がDIV 要素の左右のアニメーションをちらつきなくスムーズに実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。