複数の CSS アニメーションを異なる速度で同時に実行するにはどうすればよいですか?

速度が異なる複数の CSS アニメーションの同時実行

異なる速度を維持しながら複数の CSS アニメーションを同時に再生しようとすると、問題が発生します。これは、アニメーション プロパティのカンマ区切り構文を利用することで実現できます。たとえば、さまざまな速度で画像の回転と拡大を同時に行いたい場合は、次のコード スニペットを使用できます:

.image {
    ...
    animation: spin 2s linear infinite, scale 4s linear infinite;
}

この場合、スピンとスケールの 2 つのアニメーションを指定します。カンマ。各アニメーションは独自のタイミング値を持っているため、回転とスケールの両方の変換の継続時間と補間動作を個別に定義できます。これにより、4 秒間隔でサイズを拡大しながら、画像を 2 秒ごとに連続的に回転させることができます。

提供された例で示されているように、このアプローチでは複数の CSS アニメーションを効果的に同時に実行でき、より優れたアニメーションを提供できます。複雑なアニメーション シーケンスに対する柔軟性と制御。

以上が複数の CSS アニメーションを異なる速度で同時に実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。