CSS で絶対位置の Div の左右のスムーズな移動を実現するにはどうすればよいですか?

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

Web デザインの領域では、要素を流動的にアニメーション化する機能が非常に重要です。 。ただし、絶対的に配置された div を左右に移動する場合、要素が一時的に消えてから再び表示されるという共通の課題が発生します。この問題は、アニメーションのトランジションが不適切なことが原因で発生することがよくあります。

これに対処するには、左または右に固定値を使用しないことが重要です。代わりに、transform プロパティを left または right と組み合わせて利用することを検討してください。この手法により、アニメーション中の突然の消失を防ぐことができます。

消失の問題に対処する更新された 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>

この更新されたコードでは、translateX(-100%) を内部で使用します。変換プロパティを使用して要素を 100% 左にシフトし、目に見える消失を回避します。これにより、中断されることなくスムーズかつ直線的な左右の動きが保証されます。

以上がCSS で絶対位置の Div の左右のスムーズな移動を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。