Bagaimanakah Saya Boleh Mencetuskan Berbilang Animasi CSS Secara serentak?

Serentak Mencetuskan Berbilang Animasi CSS

Apabila berurusan dengan animasi CSS, selalunya wajar untuk melaksanakan berbilang animasi secara serentak. Ini boleh dicapai dengan memanfaatkan sifat animasi.

Struktur Kod

Untuk mencetuskan dua animasi secara serentak, seseorang boleh menggunakan senarai yang dipisahkan koma dalam perisytiharan animasi, seperti ditunjukkan di bawah:

animation: rotate 1s, spin 3s;

Dalam kejadian ini, animasi putar dan putaran kedua-duanya akan digunakan pada elemen yang ditentukan. Setiap animasi akan mengekalkan sifat yang telah ditetapkan, seperti tempoh dan fungsi pemasaan.

Pelaksanaan Demo

Untuk menggambarkan konsep ini, pertimbangkan contoh kod berikut:

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

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

@-webkit-keyframes scale {
    100% {
         transform: scaleX(2) scaleY(2);
    }
}

Di sini, berbilang animasi ditakrifkan dalam sifat -webkit-animation menggunakan koma. Animasi putaran akan memutarkan imej setiap 2 saat, manakala animasi skala akan menggandakan saiznya setiap 4 saat.

Demonstrasi Langsung

Untuk melihat kesan ini dalam tindakan, rujuk URL berikut: http://jsfiddle.net/Ugc5g/3392/

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencetuskan Berbilang Animasi CSS Secara serentak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!