Meneroka sifat animasi CSS: bingkai utama dan animasi

animasi CSS telah menjadi bahagian penting dalam reka bentuk web moden. Ia boleh menambah kesan interaktif yang jelas pada halaman web dan meningkatkan pengalaman pengguna. Dalam CSS, kita boleh menggunakan dua kerangka utama sifat dan animasi untuk mencipta pelbagai kesan animasi yang hebat. Artikel ini akan membawa anda menerokai kedua-dua sifat ini secara mendalam dan memberikan contoh kod khusus.

Dalam CSS, bingkai utama ialah kata kunci yang digunakan untuk menentukan bingkai kunci animasi. Kita boleh menggunakan peraturan " @keyframes " untuk mentakrifkan urutan animasi. Sintaks khusus adalah seperti berikut:

@keyframes animation_name {
    0% { 
       /* 前景样式 */
    }
    50% {
       /* 中间样式 */
    }
    100% {
       /* 结束样式 */
    }
}

animation ialah atribut yang digunakan untuk menentukan animasi yang digunakan pada elemen. Kita boleh menggunakan kerangka utama yang ditentukan pada elemen menggunakan sifat " animasi ". Sintaks khusus adalah seperti berikut:

animation: animation_name duration timing_function delay iteration_count direction fill_mode play_state;

Mari lihat beberapa contoh kod khusus untuk membantu anda memahami penggunaan bingkai utama dan animasi.

1. Animasi latar belakang warna kecerunan:

   HTML:
   

   <div class="box"></div>

   Salin selepas log masuk

   Salin selepas log masuk
   CSS:

   rreee this🎜 , kami mentakrifkan animasi latar belakang kecerunan. Elemen kotak menggelungkan animasi kecerunan daripada merah ke biru kepada hijau selama 5 saat.

Animasi bergerak elemen:
2. HTML:

   @keyframes gradient {
    0% { background-color: red; }
    50% { background-color: blue; }
    100% { background-color: green; }
   }
   
   .box {
    width: 200px;
    height: 200px;
    animation: gradient 5s linear infinite;
   }

   Salin selepas log masuk
   
   CSS:

   <div class="box"></div>

   Salin selepas log masuk

   Salin selepas log masuk
   #,🎜 kami mentakrifkan animasi pergerakan elemen. Elemen kotak akan menggelung dan memainkan animasi pergerakan dari kedudukan awal ke kedudukan 50% kanan ke kedudukan 100% kanan dalam masa 3 saat, dan berulang-alik.
   Animasi teks kilat:
HTML:

3. @keyframes move {
    0% { transform: translateX(0%); }
    50% { transform: translateX(50%); }
    100% { transform: translateX(100%); }
   }
   
   .box {
    width: 100px;
    height: 100px;
    background-color: red;
    animation: move 3s ease-in-out infinite alternate;
   }

   Salin selepas log masuk

   CSS:
   

   <div class="box">Hello, World!</div>

   Salin selepas log masuk
   #,🎜 kami mentakrifkan animasi teks berkelip. Kandungan teks elemen kotak akan melalui kesan kelipan daripada legap sepenuhnya kepada telus sepenuhnya kepada legap sepenuhnya dalam masa 1 saat.

   Kesimpulan:

   Melalui penerokaan mendalam tentang bingkai utama dan animasi, kita dapati bahawa ia mempunyai potensi besar dalam mencipta pelbagai kesan animasi yang hebat. Dengan menggabungkan pelbagai atribut secara munasabah, kami boleh mencipta kesan animasi yang kaya dan pelbagai serta meningkatkan pengalaman interaktif halaman web. Saya harap kandungan artikel ini dapat membantu anda lebih memahami dan menerapkan kedua-dua sifat ini.

   Atas ialah kandungan terperinci Meneroka sifat animasi CSS: bingkai utama dan animasi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!