Animasi di halaman web dapat menarik lebih banyak pengguna. Tanyakan pada diri Anda sendiri - jika Anda melihat halaman web yang memiliki sedikit animasi, tidakkah Anda ingin menjelajahi lebih banyak? Sekarang, dengan transisi CSS Anda dapat membuat pekerjaan Anda menjadi hidup dengan beberapa animasi yang bagus. Dan, ingatlah, ini perlu dilakukan dengan benar. Mari jelajahi dunia Transisi CSS dengan urutan berikut:
jumlah digit angka di java
- Mengapa Transisi CSS?
- Properti Transisi
- Apa yang Perlu Anda Tentukan?
- Properti Fungsi Fungsi waktu transisi
- Properti Transisi-Delay
Mengapa Transisi CSS?
Mari kita ambil contoh. Jika Anda mengubah warna elemen dari putih menjadi biru, perubahan ini terjadi hampir seketika. Untuk efek yang lebih beranimasi, Anda dapat membuat perubahan ini terjadi secara bertahap. Ini juga terlihat cukup menarik secara visual. Dengan mengaktifkan transisi CSS, Anda dapat menyesuaikan cara perubahan terjadi. Anda dapat menentukan bagaimana perubahan dalam elemen terjadi pada interval waktu tertentu yang mengikuti kurva percepatan.
Transisi CSS memungkinkan Anda menentukan perubahan untuk elemen, interval waktu tertentu, kecepatan kurva percepatan dan banyak lagi. Anda dapat melakukan semua ini tanpa menggunakan Flash atau JavaScript .
Untuk pemahaman yang lebih baik, Anda dapat mengacu pada gambar di bawah ini:
Pada gambar di atas, elemen HTML akan berubah dari merah menjadi biru dalam hitungan satu detik. Anda juga akan melihat warna perantara saat transisi berlangsung. Jika Anda tidak akan menggunakan transisi CSS, Anda akan melihat bahwa perubahan warna dari merah ke biru terjadi seketika - Anda tidak akan melihat warna perantara. Dengan transisi CSS, Anda akan melihat efek animasi ketika elemen HTML berubah dari keadaan lama ke yang baru.
Properti Transisi
Anda dapat menggunakan properti transisi singkat untuk mengontrol transisi CSS. Penggunaan singkatan ini tidak hanya mudah, tetapi juga dapat menghindari parameter yang tidak sinkron yang dapat membuat frustasi untuk melakukan debug di CSS.
Properti transisi menentukan properti CSS yang Anda inginkan untuk mendapatkan efek transisi. Hanya properti CSS ini yang dianimasikan.
Sintaksis:
transisi:
Sebagai pemula, Anda mungkin menghadapi beberapa kesulitan dalam menggunakan tulisan cepat. Jika Anda merasa bahwa penggunaan singkatan agak rumit saat ini, Anda dapat menentukan properti transisi secara terpisah. Untuk elemen HTML, Anda dapat menentukan properti transisi satu per satu seperti yang ditunjukkan pada contoh di bawah ini:
div {width: 100px height: 100px background: lightblue transisi-properti: lebar transisi-durasi: 2s transisi-timing-function: linear transisi-delay: 1s} div: hover {width: 300px}Arahkan kursor ke kotak
Dalam contoh di atas, kami telah menetapkan properti (properti-transisi, durasi-transisi, fungsi-waktu-transisi, dan penundaan-transisi) dan nilainya secara terpisah. Kita akan segera mempelajari tentang properti transisi ini.
Apa yang Perlu Anda Tentukan?
Ada dua hal utama yang perlu Anda tentukan untuk membuat transisi CSS: properti CSS yang ingin Anda tambahkan efek, dan durasi waktu efek itu.Anda perlu mengingat satu hal - jika Anda tidak menentukan durasi waktu, transisi akan menggunakan nilai default 0 , dan tidak akan ada efek apa pun.
Mari kita pertimbangkan contoh:
Kode di bawah ini mendefinisikan efek transisi dari properti width selama lima detik.
div {width: 100px height: 100px background: blue transisi: lebar 5s} div: hover {width: 600px}Pindahkan kursor ke elemen div di atas, untuk melihat efek transisi.
Pada kode di atas, Anda akan melihat bahwa saat Anda mengarahkan kursor ke atas kotak biru, kotak biru akan menambah lebarnya secara bertahap selama lima detik. Anda juga akan melihat bahwa saat Anda menghapus kursor dari kotak biru, kotak biru akan kembali ke ukuran aslinya secara bertahap (tidak secara instan). Anda juga dapat mengubah nilai untuk lebar dan durasi waktu untuk melihat bagaimana properti transisi ini memengaruhi elemen HTML.
Anda juga dapat menambahkan efek transisi ke lebih dari satu properti. Anda dapat melakukannya dengan menggunakan koma untuk memisahkan properti. Mari kita pertimbangkan contoh:
Pada kode di bawah ini, properti transisi ditentukan untuk lebar, tinggi, dan transformasi.
div {padding: 15px width: 150px height: 100px background: green transition: width 2s, height 2s, transform 2s} div: hover {width: 300px height: 200px transform: rotate (360deg)} Halo Dunia (Hover Over Me)
java sort arraylist dari bilangan bulat
Dengan contoh di atas, Anda akan melihat bagaimana kotak hijau bergerak saat Anda mengarahkan kursor ke kotak.
Kami hanya menentukan properti dan durasi waktu. Mari kita lihat parameter lainnya dengan berbagai contoh.
Properti Fungsi Fungsi waktu transisi
Properti ini mendefinisikan kurva kecepatan untuk efek transisi. Itu bisa mengambil nilai-nilai berikut:
- Nilai Kemudahan: Ini adalah nilai default di mana efeknya lambat di awal, lalu lebih cepat dan berakhir perlahan.
- Nilai Linear: Efek ini tidak mengubah kecepatan transisi - ini menjaga kecepatan tetap konsisten dari awal hingga akhir.
- Nilai Kemudahan: Efek ini dimulai dengan lambat.
- Nilai Kemudahan: Efek ini memiliki akhir yang lambat.
- Nilai Kemudahan Keluar: Efek ini memiliki awal yang lambat dan juga akhir yang lambat.
- Nilai Kubik-bezier (n, n, n, n): Anda dapat menentukan kumpulan nilai Anda sendiri di fungsi kubik-bezier.
Kode di bawah ini menunjukkan efek transisi untuk nilai linier, kemudahan, kemudahan masuk, kemudahan keluar dan kemudahan keluar.
div {lebar: 100px tinggi: 100px latar belakang: transisi merah muda: lebar 2s} # div1 {transisi-waktu-fungsi: linier} # div2 {transisi-waktu-fungsi: kemudahan} # div3 {transisi-waktu-fungsi: kemudahan-masuk } # div4 {fungsi-waktu-transisi: kemudahan-keluar} # div5 {fungsi-waktu-transisi: kemudahan-keluar} div: hover {width: 300px}Arahkan kursor ke elemen div di bawah
linier
meredakan
kemudahan-masuk
santai
kemudahan-masuk-keluar
Properti Transisi-Delay
Terkadang, Anda ingin animasi terjadi setelah durasi waktu tertentu. Properti penundaan transisi memungkinkan Anda menentukan penundaan untuk efek transisi. Anda dapat menentukan penundaan dalam hitungan detik.
Mari kita ambil contoh untuk melihat penundaan dalam efek transisi:
div {width: 100px height: 100px background: yellow transisi: lebar 3s transisi-penundaan: 1s} div: hover {width: 300px}Arahkan kursor ke elemen div di bawah
catatan: Anda dapat mengamati bahwa penundaan 1 detik sebelum efeknya dimulai
Pada kode di atas, saat Anda mengarahkan kursor ke kotak kuning, Anda akan melihat (selama satu detik) bahwa tidak ada efek. Setelah menunggu satu detik, Anda akan melihat efeknya.
Dengan ini, kita sampai pada akhir artikel Transisi CSS ini. Anda dapat menambahkan animasi ke Halaman Web Anda sekarang. Cobalah contoh berikut.
Lihat kami yang dilengkapi dengan pelatihan langsung yang dipimpin instruktur dan pengalaman proyek kehidupan nyata. Pelatihan ini membuat Anda mahir dalam keterampilan untuk bekerja dengan teknologi web back-end dan front-end. Ini mencakup pelatihan tentang Pengembangan Web, jQuery, Angular, NodeJS, ExpressJS, dan MongoDB.
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar blog 'Transisi CSS' dan kami akan menghubungi Anda kembali.