İki CSS animasyonunun farklı hızlarda oynatılmasını nasıl sağlayabilirim ?

• Görüntü aynı anda dönüyor ve büyüyor olmalıdır.
• Dönüş her 2 saniyede bir dönecektir.
• Büyüme her 4 saniyede bir dönecektir.

Örnek Kod:

.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/ - yalnızca bir animasyon (son bildirilen) oynatılır.

TL; DR

Virgül kullanarak, aşağıdaki CriticalError yanıtında belirtildiği gibi her biri kendi özelliklerine sahip birden çok animasyon belirtebilirsiniz.

Misal:

animation: rotate 1s, spin 3s;

Orijinal cevap

Burada iki konu var:

# 1

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

İkinci satır, birincinin yerini alır. Yani hiçbir etkisi yok.

# 2

Her iki anahtar kare de aynı özellik için geçerlidir transform

Alternatif olarak, görüntüyü bir içine sarabilir <div>ve her birini ayrı ayrı ve farklı hızlarda canlandırabilirsiniz .

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>

Yeni birinin gelmesi ve bu diziyi yakalaması durumunda, virgülle her biri kendi özelliklerine sahip birden çok animasyon belirtebilirsiniz.

Misal:

animation: rotate 1s, spin 3s;

Aynı anda birden fazla animasyon çalıştırabilirsiniz, ancak örneğinizde iki sorun var. İlk olarak, kullandığınız sözdizimi yalnızca bir animasyonu belirtir. İkinci stil kuralı ilkini gizler. Aşağıdaki gibi sözdizimini kullanarak iki animasyon belirtebilirsiniz:

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

bu kemanta olduğu gibi (aşağıda açıklanan diğer sorundan dolayı "ölçek" i "solmaya" değiştirdim ... Benimle birlikte ol.): http://jsfiddle.net/rwaldin/fwk5bqt6/

İkinci olarak, her iki animasyonunuz da aynı DOM öğesinin aynı CSS özelliğini (dönüşümü) değiştirir. Bunu yapabileceğine inanmıyorum. Farklı öğeler üzerinde iki animasyon belirtebilirsiniz, görüntü ve belki bir kap öğesi. Bu keman gibi, animasyonlardan birini kaba uygulayın: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Öznitelik yalnızca bir kez tanımlanabildiğinden iki animasyon oynatamazsınız. Bunun yerine neden ikinci animasyonu ilkine dahil etmiyorsunuz ve zamanlamayı doğru yapmak için ana kareleri ayarlamıyorsunuz?

.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">

bunun gibi bir şey deneyebilirsin

ebeveyni rotateve görüntüyü ayarlayın, scaleböylece rotateve scalezaman farklı olabilir

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>