Biasanya ketika nilai properti CSS berubah, browser akan segera memperbarui gaya yang sesuai. Misalnya, ketika mouse mengarahkan kursor ke elemen, gaya yang ditentukan melalui pemilih :hover akan segera diterapkan ke elemen tersebut. Fungsi transisi telah ditambahkan ke CSS3, yang melaluinya Anda dapat dengan lancar mentransisikan elemen dari satu gaya ke gaya lainnya dalam waktu tertentu, mirip dengan animasi sederhana, tetapi tanpa menggunakan flash atau JavaScript.
CSS menyediakan 5 properti terkait transisi, sebagai berikut:
Agar berhasil menerapkan efek transisi, ada dua hal yang harus didefinisikan:
(1) Sifat parameter dan efek transisi dalam unsur;
(2) Durasi efek transisi.
Tip: Efek transisi biasanya terjadi saat mouse mengarahkan kursor ke elemen. Jika durasi transisi tidak disetel, efek transisi tidak akan berlaku karena nilai default waktu transisi adalah 0.
1. properti transisi
Atribut properti transisi digunakan untuk mengatur nama atribut pada elemen yang berpartisipasi dalam transisi. Format sintaksnya adalah sebagai berikut:
properti-transisi: tidak ada|semua|properti;
Deskripsi parameternya adalah sebagai berikut:
none: Menunjukkan bahwa tidak ada atribut yang berpartisipasi dalam efek transisi;
semua: Menunjukkan bahwa semua atribut berpartisipasi dalam efek transisi;
properti: mendefinisikan daftar nama properti CSS yang menerapkan efek transisi. Gunakan koma untuk memisahkan beberapa nama properti.
Contoh kodenya adalah sebagai berikut:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-p roperty:width,background;}div:hover{width:200px;background-color:blue;}</style></head><body><div></div></body></html>Hasil berjalan:
2. durasi transisi
Atribut durasi transisi digunakan untuk mengatur waktu yang diperlukan untuk transisi (dalam detik atau milidetik).
durasi transisi: waktu;
Diantaranya, waktu adalah waktu yang diperlukan untuk menyelesaikan efek transisi (dalam detik atau milidetik). Nilai defaultnya adalah 0, yang berarti tidak akan ada efek.
Jika ada beberapa atribut yang berpartisipasi dalam transisi, Anda juga dapat mengatur waktu transisi untuk atribut tersebut secara bergantian. Gunakan koma untuk memisahkan beberapa atribut, seperti durasi transisi: 1s, 2s, 3s;. Selain itu, Anda juga dapat menggunakan waktu untuk mengatur waktu yang diperlukan untuk transisi untuk semua properti yang berpartisipasi dalam transisi. Contoh kodenya adalah sebagai berikut:
<!DOCTYPEhtml><html><head><style>div{width:100px;height:100px;border:3pxsolidblack;margin:10px0px0px10px;transition-property:width, background;transition-duration:.25s,1s;}div:hover{width:200px;background-color:blue;}</style></head><body><div></div></body>< /html>3. fungsi waktu transisi
Atribut fungsi waktu transisi digunakan untuk mengatur jenis animasi transisi. Nilai opsional dari atribut tersebut adalah sebagai berikut:
4. penundaan transisi
Atribut transisi-delay digunakan untuk mengatur kapan efek transisi dimulai. Format sintaks dari atribut tersebut adalah sebagai berikut:
penundaan transisi: waktu;
Diantaranya, parameter time digunakan untuk mengatur waktu menunggu sebelum efek transisi dimulai, dalam hitungan detik atau milidetik.
5. transisi
Atribut transisi merupakan singkatan dari keempat atribut di atas. Melalui atribut ini, keempat atribut di atas dapat diatur secara bersamaan. Format sintaksis dari atribut-atribut tersebut adalah sebagai berikut:
transisi: properti transisi durasi transisi fungsi waktu transisi penundaan transisi;
Dalam atribut transisi, properti transisi dan durasi transisi merupakan parameter yang diperlukan, dan fungsi waktu transisi serta penundaan transisi merupakan parameter opsional. Selain itu, beberapa kelompok efek transisi juga dapat diatur melalui atribut transisi. Setiap kelompok dipisahkan dengan koma. Kode contohnya adalah sebagai berikut: