記事の本質を捉えた、質問ベースのタイトルをいくつか紹介します。 短く直接的: * 要素を消さずに CSS でスムーズな水平方向の動きをアニメーション化するにはどうすればよいですか? * CSSアニメーション：Ac

CSS での左右の移動: 一般的な解決策

この質問は、div を左と左の間で水平に移動する CSS のみのアニメーションを求めています。コンテナの右端。単純な左の値を使用する場合の課題は、右から左に移動するときに要素が一時的に消えることです。

これを克服するために、提供された回答では、左または右と組み合わせた変換を活用することを提案しています。これにより、固定値の必要がなくなります:

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

次の CSS を使用してこのアニメーションを div に適用することで:

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

div はコンテナの端の間を水平に移動し、維持されます。アニメーション全体を通してその可視性を高めます。このソリューションは汎用的なもので、幅に関係なく、絶対位置を使用して任意の div に適用できます。

以上が記事の本質を捉えた、質問ベースのタイトルをいくつか紹介します。 短く直接的: * 要素を消さずに CSS でスムーズな水平方向の動きをアニメーション化するにはどうすればよいですか? * CSSアニメーション：Acの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。