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

複数の CSS アニメーションをさまざまな速度で同時にトリガーする方法

質問:

2 つの異なる CSS アニメーションを開始するにはどうすればよいですか?同時に、異なる時間で動作するようにします。

たとえば、回転は 2 秒ごと、スケーリングは 4 秒ごとに循環し、画像の回転と拡大縮小を同時に実行したいと考えています。

コード例:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 2s linear infinite;
    -webkit-animation:scale 4s linear infinite;
}

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

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

このコードを使用した以前の試行では、アニメーションが 1 つだけ再生されました (後者は1).

答え:

異なるプロパティを持つ複数のアニメーションを再生するには、それらをカンマで連結します。

更新された例:

.image {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    margin:-60px 0 0 -60px;
    -webkit-animation:spin 2s linear infinite, scale 4s linear infinite;
}

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