Hari ini kita akan belajar tentang properti transisi CSS3 di artikel ini dan belajar membuat beberapa efek menarik darinya.
Hingga beberapa waktu yang lalu, flash telah banyak digunakan dalam mendesain web dan banyak efek transisi dan animasi yang dirancang olehnya, tetapi seperti yang Anda ketahui seberapa cepat perubahan terjadi dalam teknologi web dan sekarang saatnya telah tiba bahwa kami Anda dapat membuat desain yang menarik hanya menggunakan CSS3 tanpa plugin pihak ketiga seperti Flash, Silverlight dll.
Apa itu Efek Transisi CSS?
Transisi CSS sangat berguna untuk membuat elemen situs web Anda lebih menarik dan juga mudah digunakan, kami dapat merancang efek transisi terbaik hanya dengan beberapa baris kode.
Waktu perubahan gaya elemen dapat dikontrol melalui properti transisi.
Sebagai contoh, jika kita berbicara tentang desain menu yang sederhana, maka ketika kita mengarahkan mouse pada sebuah tombol, warna latar belakangnya berubah, ia segera berubah tetapi jika kita ingin mengarahkan warna latar secara perlahan -Switch, maka untuk ini kita akan menggunakan properti transisi CSS3.
Sebagai contoh, kami telah membuat dua kotak di bawah ini, di mana tidak ada transisi yang digunakan dalam satu, sedangkan yang lain durasi transisi disimpan 3 detik. Anda dapat melihat perbedaan antara keduanya dengan melayang di atas dua kotak.
Anda juga dapat membuat banyak jenis animasi dengan efek transisi dan meningkatkan keindahan halaman web Anda.
Properti Transisi CSS3
Ada empat jenis properti yang digunakan untuk menggunakan fitur transisi di CSS:
- transition-property
- transition-duration
- transition-timing-function
- transition-delay
transition-property
Sekarang, mari kita mencoba memahami properti ini dan mengetahui properti mana yang cocok untuknya: Langkah pertama untuk membuat efek transisi adalah memberi tahu properti atau properti mana yang menerapkan efek transisi.
Sebagai contoh, jika kita mengarahkan kursor ke suatu elemen, ada perubahan pada dua propertinya, pertama warna latar belakang dan lebar kedua, maka kita memiliki opsi untuk menerapkan transisi pada salah satu atau kedua properti ini.
Syntax yang diberikan di bawah ini digunakan untuk ini
transition-property: none | all | property
Mari kita memahami nilai-nilai properti ini:
none: tidak ada transisi
all: Efek transisi akan berlaku untuk semua properti dari semua elemen yang dipilih
property: sebagai gantinya kami akan menentukan satu atau lebih properti yang pengaruhnya diterapkan
Contoh:
transition-property: none; transition-property: all; transition-property: background-color; transition-property: color, height, width;
transition-duration
Kami juga dapat mengontrol waktu dalam transisi, untuk ini kami harus menggunakan properti durasi transisi. Dalam nilainya kita dapat menentukan daftar waktu, satuan waktu dapat dalam detik atau milidetik. Nilai awalnya adalah 0 yang berarti bahwa transisi tidak akan memakan waktu.
Sintaksnya adalah sebagai berikut:
transition-duration: time;
Contoh:
transition-duration: 2s; transition-duration: 2000ms; transition-duration: 2000ms, 3000ms;
transition-timing-function
Dengan fungsi transisi-waktu-kita menentukan apa yang akan menjadi gaya transisi. Kita dapat menggunakan nilai yang telah ditentukan untuk melakukan ini atau kita dapat membuat gaya khusus dengan menggunakan bezier kubik.
Sintaksnya diberikan di bawah ini:
transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out| cubic-bezier(n,n,n,n);
Contoh:
transition-timing-function: ease;
transition-timing-function: ease, linear;
transition-timing-function: cubic-bezier(1.000, 0.5, 0.15, 0.8);
Anda dapat melihat dalam contoh di bawah ini bagaimana fungsi waktu yang telah ditentukan ini bekerja. Dalam contoh ini, kami telah membuat 5 kotak tempat mouse melayang, mereka mengembang hingga 500px dan untuk ini kami menjaga durasi transisi 2 detik.
transition-delay
Dengan properti transisi-penundaan, kami juga dapat memutuskan kapan transisi akan dimulai. Nilai defaultnya adalah 0 dan, seperti properti durasi transisi, waktu ditentukan dalam detik atau milidetik.
Sintaks properti ini adalah sebagai berikut:
transition-delay: time;
Contoh:
transition-delay: 2s; transition-delay: 3000ms, 6000ms; transition-delay: -3s;
Saya telah berfokus pada konsep transisi CSS dasar dalam artikel ini sehingga Anda dapat memahami cara kerjanya dan cara menggunakannya, jika Anda ingin membuat beberapa efek lanjutan, maka cobalah mentransisikan dengan properti lain.
Katakan apakah Anda menyukai artikel ini, jika Anda memiliki pertanyaan, Anda dapat bertanya melalui kotak komentar.