Mainkan beberapa animasi CSS secara bersamaan


119

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.


Haruskah gambar diskalakan saat sedang berputar? Jawaban yang saya berikan tidak tetapi jika itu yang Anda butuhkan maka itu dapat disesuaikan untuk melakukan itu
Ram G Athreya

Jawaban:


154

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>


216

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;

3
Terima kasih, ini adalah solusi yang jauh lebih sederhana
Sergey Rotbart

12
Sial ya koma!
Zachary Dahan

3
bagaimana dengan penundaan animasi yang berbeda?
pria kecil kecil

35

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/


Terima kasih telah menentukan, kami dapat melakukan banyak animasi karena kami memisahkan nama dengan koma.
Zachary Dahan

3

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


2
asekd pengguna untuk "pada kecepatan yang berbeda"
rnrneverdies

Pada kecepatan yang berbeda, rotasi terjadi dalam 2 detik sementara skala terjadi dalam 4 detik karena menulis dua pernyataan animasi tidak berfungsi Saya telah mengatur waktu melalui keyframes.
Ram G Athreya

Memang benar bahwa Anda tidak dapat memainkan dua animasi transformasi pada saat yang sama (karena satu transformasi akan menimpa yang lain), tidaklah benar untuk mengatakan "Anda tidak dapat memainkan dua animasi karena atribut hanya dapat ditentukan sekali." Lihat jawaban yang diterima tentang penggunaan nilai yang dipisahkan koma dengan animasi.
Justin Taddei

2

Anda bisa mencoba sesuatu seperti ini

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

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.