Bagaimana untuk membuat Animasi dalam Css?

pengenalan

Hari ini saya akan memberitahu anda cara membuat animasi. Kami akan melihat semua sifat animasi yang diperlukan dalam siaran ini. Anda boleh mendapatkan kod pada github saya. Jadi Jom Mulakan!!

Animasi

Animasi ialah penggunaan harta untuk meningkatkan rupa tapak web. Ia memberikan gangguan pengguna yang bagus dan juga digunakan untuk menunjukkan kepada orang ramai matlamat tapak web.

Animasi Asas

Animasi Pertama: Menukar warna segi empat sama

<div id="square">Square</div>

Di sini saya membuat segi empat sama warna biru dan kemudian memberikannya beberapa gaya. Anda boleh mengambil sebarang warna!

#square{
    position: relative;
    width: 8rem;
    height: 8rem;
    background-color: rgb(14, 202, 202);
    border-radius: 5px;
    margin: 3rem 0 0 3rem;
    text-align: center;
}

Sekarang kami akan membuat animasi.

Langkah 1: Buat animasi @keyframes

Untuk membuat animasi Anda perlu menetapkan @keyframes. Ia memegang gaya yang ingin anda berikan kepada elemen anda pada masa tertentu dan kemudian anda perlu memberikannya nama. Saya kes saya, saya menukar warna segi empat sama. Jadi, saya beri warna nama. Kini, Anda boleh menulis @keyframes dalam dua jenis seperti

@keyframes color{
    from{
        background-color: rgb(14, 202, 202);
    }
    to{
        background-color: pink;
    }
}

Jika anda ingin melakukan animasi yang mempunyai dua langkah yang anda boleh gunakan untuk pergi dan balik. Atau anda boleh melakukannya dengan menggunakan nilai peratusan seperti

@keyframes color{
    0%{
        background-color: rgb(14, 202, 202);
    }
    100%{
        background-color: pink;
    }
}

Nilai peratusan digunakan apabila anda perlu melakukan pelbagai tugas dalam animasi tetapi anda boleh menggunakan kedua-duanya! Saya biasanya menggunakan nilai peratusan untuk animasi

Langkah 2: Tetapkan sifat animasi pada petak.

Sekarang, kami akan membuat animasi hartanah di dataran. Anda perlu tahu tentang sifat animasi untuk itu. Saya akan memberitahu anda yang kebanyakannya menggunakan:

• nama-animasi - Ia digunakan untuk memberitahu penyemak imbas @keyframes yang anda mahu gunakan. Dalam kes saya, nama @keyframes saya ialah warna.

• tempoh-animasi - Ia digunakan untuk memberitahu berapa lama masa animasi itu perlu disiapkan.

• kiraan lelaran-animasi - Ia digunakan untuk memberitahu berapa kali ia perlu dilaksanakan.

Anda boleh mengetahui lebih lanjut tentang animasi di w3school atau di mana-mana tapak web lain. Sekarang, kami akan menggunakan sifat animasi tetapi kami akan menulisnya dalam satu baris seperti ini:

    animation: color 4s infinite;

Terdapat 7 sifat dalam animasi dalam Css. Untuk menggunakan sifat animasi dalam satu baris, saya mula-mula menulis nama-animasi iaitu warna, kemudian tempoh animasi iaitu 4s dalam kes saya dan kemudian menetapkan kiraan lelaran animasi kepada tak terhingga. Jika anda ingin menggunakan animasi sekali sahaja, anda boleh menetapkannya kepada 1 . Anda juga boleh menetapkan nilai sifat animasi sendiri.

Kini, jika anda melihat segi empat sama anda, ia akan bertukar warna lagi dan lagi! Sekarang, kita akan membuat petak itu bergerak sambil menukar warna.

Animasi Kedua: Menggerakkan segi empat sama sambil menukar warna!

Untuk itu saya akan menggunakan petak yang sama dan saya akan membuat satu lagi @keyframes untuk itu. Kami akan menggunakan langkah yang sama seperti sebelum ini

Langkah 1: Buat animasi @keyframes

@keyframes move{
    0%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }50%{
        left: 300px;
        background-color: pink;
    }100%{
        left:0px;
        background-color: rgb(14, 202, 202);
    }
}

Di sini, saya membuat @keyframes dengan nama bergerak dan saya menggunakan tiga langkah untuk animasi ini. Mula-mula saya menetapkan kiri kepada 0px dan warna latar belakang. Kemudian pada 50% saya menetapkan kiri kepada 300px dan menukar warna latar belakang dan akhirnya, saya sekali lagi menetapkan kiri kepada 0px, supaya ia akan berada pada kedudukan pertama.

Langkah 2: Tetapkan sifat animasi pada petak

    animation: move 4s infinite;

Di sini, saya menetapkan nama animasi untuk bergerak, kemudian tempoh animasi kepada 4s dan kiraan lelaran animasi kepada tak terhingga. Sekali lagi anda boleh menetapkan nilai animasi mengikut pilihan anda. Dan juga jangan lupa untuk mengulas sifat animasi pertama atau perkara boleh menjadi salah!

Kesimpulan

Memandangkan post tersebut sudah terlalu panjang jadi kami akan meneruskannya pada post yang lain. Buat masa ini, cukuplah untuk hari ini. Saya harap anda memahaminya. Saya cuba sedaya upaya untuk memberitahu semua perkara tentang animasi. Dan juga beritahu saya dalam ulasan mengenai topik apa yang harus saya tulis pada siaran seterusnya. Terima kasih kerana membaca!

Atas ialah kandungan terperinci Bagaimana untuk membuat Animasi dalam Css?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!