Teknologi animasi CSS3 yang perlu Anda ketahui (3)

Penulis：Eve Cole Waktu Pembaruan：2025-01-15 10:52:10

transisi

Transisi dasar yang melibatkan properti CSS adalah untuk mendefinisikan dan memindahkan elemen dari keadaan diam (misalnya, latar belakang biru tua) ke keadaan melayang atau aktif (misalnya, latar belakang biru muda).

Transformasi dapat digunakan bersama dengan transformasi (serta memunculkan peristiwa seperti :hover atau :focus) untuk membuat beberapa animasi. Memudarkan warna latar belakang, menggeser elemen dan memutar objek, semuanya dengan transisi CSS.

Berikut isi kutipannya:

#nav a{ warna latar:merah }
#nav a:arahkan kursor, #nav a:fokus{
warna latar belakang: biru;
/* Memberitahukan transformasi untuk diterapkan pada properti background-color (terlihat seperti parameter CSS, bukan? #foreshadowing)*/
-properti-transisi-webkit:warna latar;
/* Biarkan selama dua detik*/
-durasi transisi-webkit: 2 detik;
}

Beberapa parameter untuk dikonversi

properti transisi

Tentukan nama properti CSS dari transformasi. Misalnya, dalam contoh di atas, transformasi diterapkan ke properti warna latar.

durasi transisi

Menentukan waktu yang diperlukan untuk melakukan konversi (waktu yang diperlukan untuk mengubah atribut lama ke atribut baru)

fungsi waktu transisi

Dapat dipahami sebagai efek yang berlebihan. Menentukan nilai perantara selama konversi. Dapat ditentukan dengan kubik-bezier. Tentu saja ada beberapa nilai bawaan yang umum digunakan: kemudahan |. linier |. kemudahan masuk |. kemudahan masuk

penundaan transisi

Ini lebih mudah dipahami, ini adalah waktu tunda konversi. Waktu dapat berupa bilangan bulat positif, bilangan bulat negatif, atau nol. Jika bukan nol, satuannya harus disetel ke s (detik) atau ms (milidetik). titik waktu itu, dan tindakan sebelumnya akan terpotong.
Catatan: Bagian parameter ditambahkan selama penerjemahan dan tidak ada dalam teks asli.

Dukungan peramban

Sekeren atribut transform, namun saat ini hanya didukung oleh browser WebKit. -moz-transition sudah tersedia di Firefox 3.7 versi nightly-build terbaru. Anda juga dapat menambahkan -moz-transition ke CSS Anda untuk penyempurnaan di masa mendatang. Anda bahkan dapat menambahkan properti tanpa awalan pribadi, untuk berjaga-jaga.

Animasi

Animasi adalah tempat CSS 3 paling berguna. Anda dapat menggabungkan semua elemen yang kita bahas di atas dengan properti animasi seperti durasi animasi, nama animasi, dan fungsi waktu animasi untuk membuat efek seperti animasi Flash - CSS murni.

Berikut isi kutipannya:

#putar {
margin: 0 otomatis;
lebar: 600 piksel;
tinggi: 400 piksel;
/* Pastikan kita berada dalam ruang 3-D*/
-webkit-transform-style: melestarikan-3d;
/*Membuat seluruh baris menggunakan rotasi sumbu x, animasi dalam 7 detik, pemutaran tanpa batas, dan linearitas*/
-nama-animasi-webkit: x-spin;
-durasi-animasi-webkit: 7 detik;
-webkit-animation-iteration-count: tak terbatas;
-fungsi-waktu-animasi-webkit: linier;
}
/* Menentukan animasi yang akan dipanggil*/
@-webkit-keyframes x-spin {
0% { -transformasi webkit: putarX(0deg);
50% { -transformasi webkit: putarX(180 derajat }
100% { -transformasi webkit: putarX(360 derajat }
}

Kode animasi CSS yang fantastis dan demo online ini dapat dilihat di situs webkit . Demonya dapat dilihat di situs web mana pun, tetapi efek animasinya hanya terlihat pada WebKit versi nightly build di Mac os (Snow Leopard). Tampilannya seperti pada video di atas, dan jika Anda menggunakan mac os (versi macan tutul salju), menurut saya ada baiknya menginstal webkit untuk melihat sendiri efeknya (keren sekali). Pengguna sistem Windows untuk sementara tidak dapat merasakan efek ini.

Beberapa parameter animasi

Parameter animasi agak mirip dengan terjemahan, jadi jika Anda memahami parameter terjemahan, tidak sulit untuk memahaminya di sini.

nama animasi

Nama animasinya.

durasi animasi

Tentukan waktu yang diperlukan agar animasi diputar satu kali. Standarnya adalah 0;

fungsi pengaturan waktu animasi

Tentukan cara animasi dimainkan. Pengaturan parameter mirip dengan fungsi waktu transisi.

penundaan animasi

Tentukan kapan animasi dimulai

jumlah iterasi animasi

Tentukan jumlah loop, tak terhingga artinya waktu tak terbatas. Standarnya adalah 1.

-arah-animasi-webkit

Arah pemutaran animasi, dua nilai, defaultnya normal. Saat ini, setiap siklus animasi akan diputar maju. Nilai lainnya adalah bergantian, maka angka genap dimainkan ke depan, dan angka ganjil dimainkan sebaliknya.
Dukungan peramban

Sayangnya, saat ini hanya sedikit browser yang mendukung animasi CSS. Animasi CSS 2D berfungsi di Safari 4 (Leopard), Chrome 3, Safari Mobile, Shira, dan browser Webkit lainnya. Safari 4 (Snow Leopard) mendukung animasi 3D.