Animasi dalam CSS

Animasi dalam CSS mempunyai dua bahagian - @keyframes dan animasi-*.

Peraturan @keyframes

Bahagian pertama memerlukan kami mentakrifkan @keyframes.

Ini membolehkan kami menentukan gaya CSS yang harus digunakan pada titik yang berbeza dalam tempoh animasi.

Titik masa yang berbeza dinyatakan dalam % nilai. Sebarang bilangan kedudukan offset antara 0 dan 100 peratus boleh ditentukan.

dari boleh digunakan untuk mengimbangi 0%, dan kepada adalah sama dengan mengimbangi 100%.

    @keyframes anim-name {
        from { css-style-a }
        to { css-style-b }
    }

Di bawah gaya css telah ditentukan untuk tiga titik masa untuk satu sifat - warna latar belakang.

    @keyframes colorit {
        0% { background-color: red; }
        50% { background-color: yellow; }
        100% { background-color: silver; }
    }

Ia juga boleh menentukan berbilang sifat.

    @keyframes colorit {
        0% { 
            background-color: red; 
            left: 0px; 
            top: 50px;
        }
        50% { 
            background-color: yellow; 
            left: 50px; 
            top: 75px;
        }
        100% { 
            background-color: silver; 
            left: 200px;
            top: 25px;
        }
    }

sifat animasi-*

Berikut ialah senarai sifat yang boleh digunakan untuk mengawal cara peralihan gaya akan dilakukan untuk memberikan UI/UX animasi.

• komposisi-animasi
• penangguhan-animasi
• arah-animasi
• tempoh-animasi
• mod-isi-animasi
• kiraan-lelaran-animasi
• nama-animasi
• keadaan-main-animasi
• julat animasi
• hujung-julat-animasi
• permulaan-julat-animasi
• garis masa animasi
• fungsi pemasaan-animasi

Setiap sub-sifat ini menetapkan beberapa aspek animasi.

Di bawah ialah definisi untuk @keyframes bernama colorit untuk dijalankan selama 3 saat.

    div.box {
        ...
        animation-name: colorit;
        animation-duration: 3s;
        ...
    }

Semua sub-sifat boleh ditentukan dalam satu baris menggunakan trengkas animasi.

animation: 3s colorit;

Pelayar melakukan matematik yang diperlukan dan menghasilkan animasi yang sesuai.

Begitu juga, sifat animasi membenarkan kawalan kelewatan, pemasaan, bilangan kali (lelaran), arah dll. untuk pereka bentuk mencapai visinya.

Atas ialah kandungan terperinci Animasi dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!