Bagaimana saya bisa memiliki dua animasi CSS yang diputar dengan kecepatan berbeda ?

• Gambar harus berputar dan tumbuh pada saat yang bersamaan.
• Rotasi akan berputar setiap 2 detik.
• Pertumbuhan akan berputar setiap 4 detik.

Kode Contoh:

.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/ - hanya satu animasi (yang terakhir diumumkan) yang diputar.

TL; DR

Dengan koma, Anda dapat menentukan beberapa animasi masing-masing dengan propertinya sendiri seperti yang dinyatakan dalam jawaban CriticalError di bawah ini.

Contoh:

animation: rotate 1s, spin 3s;

Jawaban asli

Ada dua masalah di sini:

# 1

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

Baris kedua menggantikan baris pertama. Jadi, tidak ada pengaruhnya.

# 2

Kedua bingkai utama berlaku di properti yang sama transform

Sebagai alternatif, Anda bisa membungkus gambar dalam <div>dan menganimasikan masing-masing secara terpisah dan pada kecepatan yang berbeda.

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>

Jika ada orang baru yang datang dan menangkap utas ini, Anda dapat menentukan beberapa animasi - masing-masing dengan propertinya sendiri - dengan koma.

Contoh:

animation: rotate 1s, spin 3s;

Anda memang dapat menjalankan beberapa animasi secara bersamaan, tetapi contoh Anda memiliki dua masalah. Pertama, sintaks yang Anda gunakan hanya menentukan satu animasi. Aturan gaya kedua menyembunyikan yang pertama. Anda dapat menentukan dua animasi menggunakan sintaks seperti ini:

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

seperti di biola ini (di mana saya mengganti "skala" dengan "memudar" karena masalah lain yang dijelaskan di bawah ... Bersabarlah.): http://jsfiddle.net/rwaldin/fwk5bqt6/

Kedua, kedua animasi Anda mengubah properti CSS yang sama (transformasi) dari elemen DOM yang sama. Saya tidak percaya Anda bisa melakukan itu. Anda dapat menentukan dua animasi pada elemen yang berbeda, gambar dan elemen kontainer mungkin. Cukup terapkan salah satu animasi ke wadah, seperti di biola ini: http://jsfiddle.net/rwaldin/fwk5bqt6/2/

Anda tidak dapat memainkan dua animasi karena atribut hanya dapat ditentukan sekali. Lebih baik mengapa Anda tidak menyertakan animasi kedua di animasi pertama dan menyesuaikan bingkai utama untuk mendapatkan waktu yang tepat?

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

Anda bisa mencoba sesuatu seperti ini

atur induk ke rotatedan gambar ke scalesehingga waktu rotatedan scalewaktu bisa berbeda

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>