web-dev-qa-db-ja.com

複数の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);
    }
}

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

csscss3css-animations
75
Don P

TL; DR

コンマを使用すると、それぞれ独自のプロパティを持つ複数のアニメーションを指定できます。

例：

animation: rotate 1s, spin 3s;

元の答え

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

＃1

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

2行目は最初の行を置き換えます。したがって、効果はありません。

＃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>
98
rnrneverdies

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

例：

animation: rotate 1s, spin 3s;
183
Critical Error

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

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

このフィドルのように（以下で説明する他の問題のため、「スケール」を「フェード」に置き換えました...我慢してください。）： http://jsfiddle.net/rwaldin/fwk5bqt6/

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

33
Ray Waldin

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

rotateとscaleの時間が異なるように、親をrotateに、イメージをscaleに設定します

div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: spin 2s linear infinite;
}
.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  -webkit-animation: scale 4s linear infinite;
}
@-webkit-keyframes spin {
  100% {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes scale {
  100% {
    transform: scale(2);
  }
}
<div>
  <img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120" />
</div>
1
Vitorino fernandes

属性は1回しか定義できないため、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">
1
Ram G Athreya