複数のCSSアニメーションを同時に再生する


116

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);
    }
}

http://jsfiddle.net/Ugc5g/3388/-1つのアニメーション(最後に宣言されたもの)のみが再生されます。


回転中に画像を拡大縮小する必要がありますか?私が提供した答えはそうではありませんが、それがあなたが必要なものであれば、それを行うために微調整することができます
Ram G Athreya 2014年

回答:


153

TL; DR

カンマを使用すると、以下のCriticalError回答で述べられているように、それぞれ独自のプロパティを持つ複数のアニメーションを指定できます。

例:

animation: rotate 1s, spin 3s;

元の答え

ここには2つの問題があります。

#1

-webkit-animation:spin 2s linear infinite;
-webkit-animation:scale 4s linear infinite;

2行目は1行目を置き換えます。したがって、影響はありません。

#2

両方のキーフレームが同じプロパティに適用されます transform

別の方法として、画像をにラップして、<div>それぞれを別々に異なる速度でアニメーション化することもできます。

http://jsfiddle.net/rnrlabs/x9cu53hp/

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

.spinner {
    position: relative;
    top: 150px;
    animation: spin 2s infinite linear;
}


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

@keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}
<div class="spinner">
<img class="scaler" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">
<div>


215

新しいスレッドがやって来て、このスレッドをキャッチしている場合は、複数のアニメーション(それぞれが独自のプロパティを持つ)をコンマで指定できます。

例:

animation: rotate 1s, spin 3s;

3
おかげで、これははるかに簡単な解決策です
Sergey Rotbart

12
地獄ええコンマ!
Zachary Dahan

2
異なるアニメーションの遅延はどうですか?
小さな小さな男

35

実際、複数のアニメーションを同時に実行できますが、この例には2つの問題があります。まず、使用する構文は1つのアニメーションのみを指定します。2番目のスタイルルールは最初のルールを非表示にします。次のような構文を使用して、2つのアニメーションを指定できます。

-webkit-animation-name: spin, scale
-webkit-animation-duration: 2s, 4s

このフィドルのように(以下で説明する他の問題のために「スケール」を「フェード」に置き換えました...私と一緒にください):http : //jsfiddle.net/rwaldin/fwk5bqt6/

次に、両方のアニメーションが同じDOM要素の同じCSSプロパティ(変換)を変更します。そんなことができるなんて信じられない。異なる要素、つまり画像とコンテナ要素の2つのアニメーションを指定できます。次のフィドルのように、コンテナにアニメーションの1つを適用するだけです:http : //jsfiddle.net/rwaldin/fwk5bqt6/2/


名前をコンマで区切っているため、複数のアニメーションを実行できることを指定していただきありがとうございます。
Zachary Dahan、2015

3

属性は一度しか定義できないため、2つのアニメーションを再生することはできません。むしろ、最初のアニメーションに2番目のアニメーションを含め、タイミングを正しくするためにキーフレームを調整してみませんか?

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

@-webkit-keyframes spin-scale { 
    50%{
        transform: rotate(360deg) scale(2);
    }
    100% { 
        transform: rotate(720deg) scale(1);
    } 
}
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">


2
ユーザーasekdの「異なる速度で」
rnrneverdies 14年

2つのアニメーションステートメントの記述が機能しないため、2秒で回転が発生し、4秒でスケールが発生する速度は異なります。キーフレームを介してタイミングを管理しました。
Ram G Athreya 2014年

2つのトランスフォームアニメーションを同時に再生できない(1つのトランスフォームが他のトランスフォームを上書きするため)ことは事実ですが、「属性は1度しか定義できないため、2つのアニメーションを再生することはできません」と言っても正しくありません。アニメーションでのカンマ区切り値の使用について、受け入れられた回答を参照してください。
Justin Taddei

2

あなたはこのようなものを試すことができます

rotateと画像をにscale設定して、rotatescale時間が異なるようにすることができます

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.