Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. HTML & CSS

Dasar-dasar CSS : Transisi CSS3

by
Read Time:5 minsLanguages:
This post is part of a series called CSS3 Mastery.
Quick Tip: Detect CSS3 Support in Browsers with JavaScript
Quick Tip: Ever Thought About Using @Font-face for Icons?

Indonesian (Bahasa Indonesia) translation by ⚡ Rova Rindrata (you can also view the original English article)

Saat CSS3 diluncurkan di seluruh web, ia membawa beberapa teknik presentasi baru yang menarik bersamaan dengannya. Hari ini, kita akan meninjau dasar-dasar penggunaan transisi dan animasi CSS3 untuk menambahkan lapisan polesan ekstra.

Tutorial ini mencakup screencast yang tersedia untuk anggota Tuts + Premium.

Langkah 1 – Transisi Link

Untuk memulai, kita akan bekerja dengan beberapa teknik dasar - pertama adalah perubahan warna teks sederhana ketika pengguna meng-hover di atas elemen tertentu.

Di sini, kita mengubah warna teks ke merah saat hover. Sekarang, dengan sedikit CSS3, kita bisa membuat tampilan yang lebih halus dengan secara bertahap memudarkan warnanya.

Kita telah menambahkan properti css, -webkit-transition. Perhatikan bahwa awalan -webkit menentukan bahwa ini hanya akan bekerja di mesin Webkit, atau Safari dan Chrome. Untungnya, browser modern lainnya juga memiliki implementasi sendiri juga. Pernyataan lengkap yang mencakup semua browser mungkin terlihat seperti berikut:

Perlu diketahui bahwa, untuk tutorial ini, kita akan berfokus secara eksklusif pada implementasi webkit. Setelah deklarasi properti, kita memiliki nilai "color 1s ease-in." Ini adalah deklarasi singkatan; mewakili tiga nilai:

  1. properti yang akan ditransisikan
  2. durasi transisi
  3. jenis transisi

Dalam hal ini, kita transisi menggunakan ease-in, yang akan memulai transisi perlahan-lahan, dan mempercepat dalam transisi.


Langkah 2 – Transisi Latar Belakang

Penggunaan dasar lainnya dari perubahan status adalah mengubah latar belakang dari sebuah kotak input pada saat fokus.

Kali ini, kita menempatkan deklarasi transisi ke status hover, sehingga kita tidak menambahkan kelas tambahan yang tidak perlu ke CSS. Kami menerapkan transisi setelah kotak input memperoleh fokus.


Langkah 3 – Transisi Beberapa Properti

Transisi CSS sebenarnya relatif mudah untuk menambahkan ke fungsi hover yang ada, dan memberikan situs Anda polesan ekstra untuk browser yang mendukung CSS3.

Untuk mengambil langkah lebih jauh, kita juga dapat mentransisikan beberapa properti CSS menggunakan versi panjang dari transisi CSS3.

Kali ini, latar belakang dan warna teks berubah pada hover, jadi kita bisa menargetkan kedua properti ini dengan transisi kita. Kami hanya membagi transisinya: pertama kita memiliki -webkit-transisi-properti dan memisahkan nilai yang berbeda dengan koma. Jadi kita menargetkan properti warna dan latar belakang, masing-masing.

Kemudian kita menetapkan durasi transisi menggunakan:

Ini direferensikan dalam urutan yang sama seperti pernyataan pertama; kali ini, bagaimanapun, kedua nilai ditetapkan ke 1s.

Terakhir, kita menetapkan fungsi waktu, dan menetapkan dua nilai yang berbeda: yang pertama, linier, berhubungan dengan variabel yang dinyatakan pertama kali - warna; dan yang kedua berhubungan dengan variabel latar belakang.

Jadi, kita telah menetapkan warna pada perubahan linier selama satu detik, dan latar belakang ke ease-in selama periode waktu yang sama.


Screencast Penuh



Langkah 4 – Menempatkan Potongan-potongannya Bersama-sama

Transisi CSS3 mulai masuk ke mereka sendiri saat mereka digabungkan dengan properti CSS baru lainnya.

Anda dapat meninjau contoh dalam menggunakan elemen yang bertumpukan dan transisi pada Andy Clarke's untuk memperindah website.

Mari membuat contoh sederhana untuk menghidupkan tanda pop out.


Kita pertama kali membuat kotak pembatas untuk rambu lalu lintas, dan memberinya konteks posisi relatif untuk memastikan bahwa kita dapat memposisikan item secara mutlak di dalamnya.

Sekarang kita tempatkan kotak di halaman dan meletakkan potongan-potongan dari tanda kita di dalamnya.

Selanjutnya, tiang diposisikan dengan sebuah z-index dari dua, untuk menempatkannya di atas tanda.

Sekarang, kita menambahkan tanda, diposisikan di bawah tiang, dan memutarnya dengan properti transform CSS3.

Tanda diputar menggunakan -webkit-transform: rotate(86deg), dan diposisikan di bawah tiang. Untuk memastikan bahwa tanda berputar di sekitar titik yang benar, kita harus mengubah transform origin ke pojok kiri atas: 0, 0.


Kita menetapkan transisi untuk mengubah properti -webkit-transform lebih dari 0.5s dengan profil ease-in-out, dan pada hover, kita memutar tanda kembali ke orientasi aslinya.

Kita melakukan ini pada yang berisi #signpost:hover bukannya pada hover dari #sign itu sendiri.


Langkah 5 – Memperkenalkan Animasi


Kita sekarang bisa menggabungkan semuanya bersama-sama, menggunakan animasi webkit, yang memberikan kita kekuatan untuk melakukan hal-hal seperti rotasi yang terus-menerus.

Kita mulai dengan membuat gambar dua lingkaran, dan memposisikannya di dalam div yang berisi - seperti yang kita lakukan dengan rambu di atas.

Sekarang kita perlu mendefinisikan animasi; kita akan memutar lingkaran ke arah yang berlawanan, jadi kita perlu mengatur dua animasi.

Animasi diberi nama untuk referensi, dalam hal ini "spin" dan "spinrev." Kemudian, kita menetapkan nilai to dan from; jadi kita memutar gambar dari 0 derajat ke 360 derajat menggunakan webkit transform, dan ke -360 untuk kebalikannya.

Sekarang kita menetapkan animasi ini ke status hover. Perhatikan bahwa, jika kita menugaskannya ke status normal, animasi akan segera berjalan saat halaman dimuat.

Kita mereferensi nama animasi yang kita buat sebelumnya (-webkit-animation-name: spin;). Kemudian, kita menyatakan jumlah waktu yang kita ingin animasi dijalankan (-webkit-animation-iteration-count: infinite;). Dalam kasus ini, infinite akan membuatnya tetap berputar-putar sementara div #circles di-hover.

Kita selanjutnya menetapkan fungsi timing (-webkit-animation-timing-function: linear;), dan akhirnya, kita menetapkan durasi untuk setiap iterasi - dalam hal ini, akan menjadi sepuluh detik (-webkit-animation-duration: 10s ;), dan lima untuk sebuah revolusi yang lengkap.


Langkah 6 – Degradasi yang Anggun dengan Modernizr

Setelah kita memiliki segalanya bekerja, kita harus mempertimbangkan pengguna kita yang browsing tanpa web browser CSS3 yang mumpuni. Ini mudah dilakukan dengan menggunakan pustaka JavaScript seperti Modernizr, yang menambahkan kelas ke elemen HTML yang berkaitan dengan kemampuan browser.

Dengan menggunakan contoh tanda di atas, browser yang tidak mendukung transforms CSS tidak akan menempatkan tanda di bawah tiang dengan benar; jadi kita bisa menargetkan browser-browser ini dan cukup menyembunyikan tanda itu sampai ia di-hover di atasnya.

Ini semudah menghubungkan ke skrip Modernizr, menemukan nama kelas yang sesuai, dan kemudian membuat pernyataan CSS terpisah untuk instance itu.


Kesimpulan

Itu semua untuk saat ini. Saya harap Anda menikmatinya! Beritahu saya jika Anda memiliki pertanyaan/komentar di bawah ini!

Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.