CSS の左右の動き: ユニバーサル ソリューション

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

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

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

たとえば、次の 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;
}

この手法により、DIV がコンテナの左端と右端の間をスムーズに移動できるようになり、絶対位置を使用してあらゆる DIV に多用途のソリューションが提供されます。