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 } |
Beberapa parameter untuk dikonversi
properti transisi
Tentukan nama properti CSS untuk 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.
Alamat video: http://www.tudou.com/programs/view/YeTPctOy2mo
Berikut isi kutipannya: #putar { |
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 dibutuhkan animasi untuk 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 animasi-iterasi
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.