Hidupkan Halaman Web Anda dengan Animasi dan Transisi CSS

Diterbitkan: 2017-10-09

Desain situs web terus berkembang. Dari desain responsif, tipografi yang indah, skema kode warna yang sempurna, ilustrasi, pembuat situs web selalu menghadirkan ide dan desain baru setiap hari.

Pengguna saat ini memiliki harapan yang tinggi terhadap antarmuka pengguna karena konten berkualitas tinggi yang tersedia melalui internet. Karena antarmuka situs web berkembang, begitu pula teknologi di belakangnya. Salah satu komponen utama yang bertanggung jawab untuk meningkatkan antarmuka situs web adalah CSS .

CSS atau Cascading Style Sheets bertanggung jawab untuk membuat situs lebih interaktif dengan menentukan gaya, tata letak, desainnya. Standar terbaru untuk CSS yaitu, CSS3 telah memperkenalkan konsep animasi dan transformasi yang meningkatkan pengalaman pengguna dengan menambahkan kedalaman ekstra ke antarmuka pengguna. Dengan animasi dan transisi CSS, Anda dapat menceritakan kisah, membuat efek yang melimpah, dan membuat interaksi pengguna dengan situs web Anda menjadi lebih efektif dan bermakna.

Animasi hanyalah simulasi gerakan yang dibuat dengan menampilkan serangkaian objek seperti gambar satu demi satu. Transisi, di sisi lain, pada dasarnya adalah proses di mana suatu objek berubah dari satu keadaan ke keadaan lain. Tapi, ketika kita berbicara tentang animasi web pada dasarnya ada tiga jenis – animasi CSS atau animasi keyframe, transisi CSS dan animasi JavaScript .

Animasi CSS

Untuk membuat animasi di CSS kita perlu mengubah properti CSS dari suatu elemen seperti gambar atau teks, untuk jangka waktu tertentu. Kita dapat mengubah properti elemen sebanyak yang kita inginkan dan juga dapat mengatur durasi animasi.

Menentukan @keyframes

Animasi CSS didefinisikan sedikit dengan keyframes. Keyframe ini adalah titik perantara dari animasi. Semua animasi CSS ditentukan di bawah aturan @keyframes. Keyframe ini menentukan apa yang terjadi pada elemen pada saat tertentu yaitu,

  • properti apa yang berubah
  • ketika elemen bernyawa
  • bagaimana elemen itu bernyawa

Anda dapat mendefinisikan bingkai utama Anda sendiri sebagai:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Di sini 'ke' dan 'from' menentukan awal dan akhir animasi. Kami juga dapat menentukan animasi untuk saat-saat menengah antara awal dan akhir seperti ini:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Di sini 0% mewakili awal animasi, 100% mewakili akhir animasi, dan 50% menandakan perubahan di antara awal dan akhir. Tapi, bagaimana kita memberitahu browser berapa lama animasi harus berlangsung? Kami melakukan ini dengan bantuan properti animasi tertentu. Properti animasi ini terkait dengan elemen yang akan dianimasikan. Sebagai contoh:

element_name
{
animation_property: value;
style_property: value;
}

Di sini elemen dapat berupa tag HTML seperti div, span, img, p dll. dan style_property adalah properti penataan CSS seperti background_color, lebar, tinggi, dll. Sekarang mari kita lihat beberapa properti animasi secara detail.

  1. @keyframes : Keyframes digunakan untuk menentukan kode animasi seperti yang dibahas di atas.
  2. animation-name : Nama yang ditentukan dengan @keyframes adalah nama animasi. Nama ini digunakan untuk mereferensikan keyframe dengan elemen yang akan dianimasikan.
  3. animation-duration : Digunakan untuk menentukan durasi waktu animasi dalam detik atau milidetik. Misal kita set ke 5 detik maka animasi hanya akan berjalan selama 5 detik. Jika kita tidak menyetel properti ini, maka animasi tidak akan berjalan sama sekali karena nilai defaultnya adalah 0.
  4. animation-delay : Kita dapat menunda dimulainya animasi dengan menentukan waktu tunda animasi. Misalnya, jika Anda ingin memulai animasi 5 detik setelah halaman dimuat di browser, cukup atur penundaan animasi ke 5 detik.
  5. animasi-arah : Kami dapat memberi tahu browser apakah animasi bergerak ke arah sebaliknya atau siklus bergantian dengan properti ini. Misalnya, jika Anda ingin animasi berjalan dari awal hingga akhir, atur nilai durasi animasi sebagai 'normal'. Jika Anda ingin menjalankannya dari awal hingga akhir, setel saja nilainya ke 'terbalik'.
  6. animation-fill-mode : Kita dapat menentukan gaya elemen ketika animasi tidak diputar dengan mode ini yaitu ketika animasi tertunda atau selesai maka apa yang harus menjadi gaya elemen.
  7. animation-iteration-count : Berapa kali animasi dapat dimainkan diwakili oleh properti ini. Misalnya, jika Anda ingin memutar animasi sekali setel ke 1, atau jika Anda ingin animasi itu diputar selamanya, setel saja ke 'tak terbatas'.
  8. animasi-timing-function : Properti ini digunakan untuk menentukan kurva kecepatan animasi seperti linier, akselerasi atau de-akselerasi.
  9. Animation : Ini adalah properti singkatan untuk mengatur semua properti animasi.

Misalnya, Anda dapat menganimasikan objek memantul dengan cuplikan kode berikut. Perhatikan bagaimana notasi singkatan untuk animasi telah digunakan di sini.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}

.stage:hover .object {
 animation: slide 2s linear;	/*shorthand animation property*/
}

.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Transisi

Transisi CSS diterapkan ke properti elemen untuk durasi waktu tertentu berdasarkan fungsi pengaturan waktu tertentu alias fungsi easing. Dengan fungsi waktu, yang kami maksud adalah fungsi yang akan mengubah sifat-sifat elemen dari satu keadaan ke keadaan lain seperti perkembangan linier, akselerasi, atau de-percepatan. Anda mungkin telah memperhatikan bahwa gambar meluncur atau berubah menjadi gambar lain saat mengarahkan kursor atau suara diputar saat klik mouse. Ini semua adalah efek transisi yang dapat membuat situs web menjadi interaktif.

Fungsi easing penting untuk membuat transisi. Mereka menentukan bagaimana properti akan berubah. Mereka juga dapat mengubah tingkat di mana nilai properti berubah dari titik awal ke titik akhir transisi. Anda dapat menerapkan transisi dengan cara berikut:

element 
{
style_property: value;
transition_property: value;
}

Di sini elemen menentukan elemen HTML yang ingin Anda ubah seperti div, H1, img dll. style_property adalah gaya CSS yang diterapkan pada elemen itu. Sekarang mari kita lihat beberapa properti transisi :

  • transisi-properti : Efek transisi akan selalu diterapkan pada properti CSS dari suatu elemen seperti lebar, tinggi, warna, atau bentuknya. Nilai atribut ini menentukan properti CSS elemen tersebut. Efek transisi akan dimulai setiap kali properti ini berubah misalnya pada mouse atau klik.
  • transisi-waktu-fungsi : Ini adalah fungsi kemudahan untuk diterapkan pada elemen. Properti ini digunakan untuk menentukan kurva kecepatan transisi seperti kemudahan masuk, kemudahan keluar, linier dll.
  • transisi-durasi : Ini seperti properti durasi animasi. Ini digunakan untuk menentukan durasi waktu efek transisi dalam detik atau milidetik. Misalnya, jika kita set ke 5 detik maka transisi akan mempengaruhi akan selesai dalam 5 detik. Jika kita tidak menyetel properti ini, maka tidak akan ada transisi sama sekali karena nilai defaultnya adalah 0.
  • transisi-delay : Dengan properti ini, kita dapat menentukan durasi waktu untuk menunda efek transisi. Misalnya, jika Anda ingin memulai efek 5 detik setelah mouse melayang, cukup atur penundaan transisi ke 5 detik.
  • transisi : Ini adalah properti singkatan untuk mengatur semua properti transisi di atas bersama-sama.

Misalnya, kode berikut akan mengubah lebar elemen div pada kursor mouse. Lihat properti singkatan transisi yang diterapkan di sini.

div { 
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animasi vs. Transisi

Animations vs. Transitions

Persamaan antara Animasi dan Transisi
  • Baik transisi dan animasi digunakan untuk memvisualisasikan perubahan properti elemen.
  • Kita dapat menentukan durasi berapa lama transisi dan animasi harus berlangsung.
  • Kami memiliki fungsi pengaturan waktu tertentu untuk mengubah laju perpindahan dari satu nilai ke nilai lainnya untuk transisi serta animasi.
Perbedaan antara Animasi dan Transisi
  • Transisi CSS bersifat reaktif . Mereka perlu dipicu oleh pengguna. Animasi di sisi lain, dijalankan setiap kali halaman dimuat di browser. Mereka tidak perlu dipicu.
  • Transisi berjalan sekali dan kemudian berhenti. Kemudian, kita harus memicunya lagi dan lagi saat animasi dapat berulang . Mereka dapat mulai dari pemberhentian mereka sendiri dan kemudian mulai lagi.
  • Browser menangani transisi itu sendiri. Kita hanya perlu menentukan awal dan akhir transisi. Kita dapat mengatur efek transisi tetapi kita tidak dapat mengubah laju perubahan transisi di antaranya. Misalnya, jika gambar meluncur pada mouse, kita hanya akan melihatnya memudar atau memudar saat kita mengarahkan kursor ke atasnya.
  • Animasi, di sisi lain, memberikan fleksibilitas untuk mengubah properti di antara awal dan akhir. Ini terjadi dengan bantuan keyframe. Misalnya, kita dapat mengatur warna gambar menjadi merah selama 5 detik pertama, lalu biru selama 5 detik berikutnya, hijau selama 5 detik berikutnya, dan kuning selama 5 detik terakhir animasi. Oleh karena itu, kami memiliki kontrol atas animasi.
Awalan Vendor

Semua fitur CSS3 tidak didukung oleh setiap browser. Oleh karena itu, kami menggunakan awalan di sepanjang properti CSS tersebut untuk browser tertentu seperti -webkit- (Safari), -moz- (Firefox), atau -o- (Opera). Ini memungkinkan penanda browser untuk menambahkan dukungan untuk fitur CSS3 itu. Awalan ini dikenal sebagai awalan vendor atau awalan Browser CSS . Oleh karena itu, kita perlu menempatkan awalan vendor bersama dengan properti animasi dan transisi juga. Misalnya, pertimbangkan kode di bawah ini dan lihat bagaimana awalan vendor untuk Safari telah digunakan:

div {
width: 100px;
height: 100px;
background: red;

/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;

/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Tip! Anda dapat menghindari keramaian ini dengan menggunakan perpustakaan seperti -prefix-free . Ini adalah perpustakaan JavaScript yang akan menambahkan awalan browser saat ini ke kode CSS apa pun. Lihat banyak perpustakaan semacam itu yang tersedia di web.

Kesimpulan

Pengembang situs web dapat menerapkan animasi dan transformasi untuk menarik pengguna ke situs web Anda. Anda dapat menggunakannya untuk menyempurnakan formulir, pemberitahuan, grafik latar belakang, gambar, bagan, coretan, tombol ajakan bertindak, dan lainnya. Cukup gunakan imajinasi Anda dan Anda dapat menemukan cara untuk memukau pengguna Anda. Ingatlah bahwa bahkan perubahan kecil di situs web Anda dapat membuatnya terlihat jauh lebih baik dan meningkatkan nilainya. Jadi, apakah Anda sudah menggunakan animasi di situs web Anda? Bagikan pemikiran Anda tentang penggunaan animasi dan transisi.