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

速度を変えて複数の CSS アニメーションを同時にトリガーする

この例では、回転効果とスケール効果を伴う 2 つの CSS アニメーションを同時にトリガーすることを目的としました。ただし、後者のアニメーションのみが再生されるという問題が発生しました。

これに対処する適切な解決策は、カンマを使用して 1 つのアニメーション プロパティ内で複数のアニメーションを指定することです。各アニメーションには、継続時間や速度などの独自のプロパティ セットを含めることができます。

変更例:

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

説明:

この変更されたコードでは、「スピン」アニメーションと「スケール」アニメーションの両方を含むアニメーション プロパティを定義します。カンマ。スピン アニメーションは 2 秒ごとにサイクルを完了し、スケール アニメーションは 4 秒ごとにサイクルを完了します。

速度の異なる複数のアニメーションを 1 つのアニメーション プロパティ内に組み込むことで、目的の効果を実現できます。回転アニメーションと成長アニメーションの両方をそれぞれの速度で同時に再生します。

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