ホームページ >ウェブフロントエンド >CSSチュートリアル >複数の CSS アニメーションを異なる速度で同時に再生するにはどうすればよいですか?

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-12-07 16:54:16326ブラウズ

How Can I Play Multiple CSS Animations Simultaneously at Different Speeds?

さまざまな速度で複数の 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。