左右の動きのための一般的なCSSアニメーション

この記事では、一般的なCSSアニメーションを作成して、その容器の端に到達する左右に移動することを探ります。このアニメーションは、その未知の長さに関係なく、絶対的なポジショニングで任意のdivに適用できます。これは、100％で、divの左のプロパティがコンテナの幅をオーバーシュートし、画面からの負の値と位置につながるためです。これにより、divを現在の位置に比較してdivを移動でき、コンテナの境界をオーバーシュートしないようにします。 0％{ 左：0; } 100％{ 左：100％; 変換：translatex（-100％）; } } ＃div1 { / * ... */ アニメーション：Destrasinistra 1S線形無限の代替。 }

このコードでは、100％のキーフレームが左と変換の両方を利用しています。左左はdivを右端に移動しますが、変換はさらに左に変換してオーバーシュートを補正します。この組み合わせにより、Divが画面外に出るのを効果的に防止します。