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

さまざまな速度で複数の CSS アニメーションを同時に再生する

指定されたコードは、構文が不適切なため、複数の CSS アニメーションを同時に実行できません。複数のアニメーションで要素をアニメーション化するには、各アニメーションをアニメーション プロパティ内でカンマで区切って個別に宣言する必要があります。

要素を非同期的に回転およびスケーリングするという望ましい効果を実現するには:

1. アニメーションを宣言するプロパティ:

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

2. 回転のスピン アニメーションを定義します:

   @-webkit-keyframes spin { 
    100% { 
        transform: rotate(180deg);
    } 
   }

3. 成長のスケール アニメーションを定義します:

   @-webkit-keyframes scale {
    100% {
        transform: scaleX(2) scaleY(2);
    }
   }

変更されたコードにより、両方のアニメーションを再生できるようになります同時に、要素を異なる速度で回転および成長させるという望ましい効果を達成します。

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