Sifat animasi CSS lanjutan: bingkai utama dan animasi

Sifat animasi CSS lanjutan: bingkai utama dan animasi

Animasi CSS ialah bahagian penting dalam reka bentuk web Ia boleh mencipta kesan mengalir dengan memaparkan imej berterusan dan meningkatkan daya tarikan visual halaman. Dalam CSS, kita boleh menggunakan pelbagai sifat animasi untuk mencipta pelbagai kesan. Artikel ini akan menumpukan pada dua sifat animasi teras: bingkai utama dan animasi, serta menyediakan contoh kod khusus.

1. bingkai utama
Bingkai kunci ialah peraturan bingkai utama yang mentakrifkan urutan animasi. Setiap peraturan boleh menentukan gaya elemen pada titik tertentu dalam kitaran animasi. Berikut ialah contoh bingkai utama mudah:

@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

Dalam contoh di atas, kami menggunakan kata kunci @keyframes untuk mentakrifkan animasi yang dipanggil fade-in. Animasi ini beralih daripada tahap ketelusan 0 (0%) kepada tahap ketelusan 1 (100%). Kami boleh menggunakan sebarang nilai peratusan untuk menentukan peraturan kerangka utama.

2. Atribut animasi
ialah atribut singkatan, digunakan untuk menetapkan satu siri atribut animasi yang ditentukan oleh peraturan @keyframes secara serentak. Berikut ialah contoh penggunaan atribut animasi:

.element {
  animation-name: fade-in;
  animation-duration: 3s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
}

Dalam contoh di atas, kami menggunakan atribut nama animasi untuk menentukan nama animasi yang akan digunakan, atribut tempoh animasi untuk menentukan tempoh animasi (3 saat), dan animasi-delay Property untuk menentukan masa tunda animasi (1 saat), animasi-fill-mod property untuk menentukan bahawa keadaan elemen akan kekal sebagai kerangka utama terakhir selepas animasi tamat, dan animasi-fungsi-masa- harta untuk menentukan lengkung masa animasi.

3 Gunakan bingkai utama dan animasi bersama-sama
Gunakan bingkai kunci dan sifat animasi bersama-sama untuk mencipta kesan animasi yang lebih kompleks. Berikut ialah contoh penggunaan bingkai utama dan sifat animasi bersama-sama:

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.element {
  animation-name: pulse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

Dalam contoh di atas, kami telah mentakrifkan animasi yang dipanggil nadi yang menggunakan kesan zum masuk dan zum keluar pada elemen melalui peraturan kerangka kunci yang berbeza. Kami menetapkan animasi untuk gelung tak terhingga menggunakan sifat kiraan lelaran animasi.

Ringkasan:
rangka kunci dan animasi ialah dua sifat yang sangat penting dalam animasi CSS. keyframes digunakan untuk menentukan peraturan keyframe untuk jujukan animasi, yang boleh menentukan gaya elemen pada titik tertentu dalam kitaran animasi. Sifat animasi digunakan untuk menetapkan secara serentak satu siri sifat animasi yang ditentukan oleh peraturan @keyframes. Menggabungkan kedua-dua sifat ini boleh mencipta pelbagai kesan animasi yang kompleks.

Saya harap contoh kod dalam artikel ini dapat membantu pembaca lebih memahami dan menggunakan kerangka utama dan animasi sifat animasi CSS. Sudah tentu, ini hanyalah asas animasi, dan terdapat teknik animasi CSS yang lebih berkuasa menunggu untuk kita terokai. Mari kita bekerjasama untuk mencipta animasi web yang menakjubkan!

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