ホームページ > 記事 > ウェブフロントエンド > 記事の本質を捉えた、質問ベースのタイトルをいくつか紹介します。 短く直接的: * 要素を消さずに 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 サイトの他の関連記事を参照してください。