Apa itu properti arah animasi CSS: Semua yang perlu Anda ketahui

Menurut Anda apa CSS hanya digunakan untuk membuat animasi? Memang benar, tetapi seiring dengan itu, Anda juga dapat menggunakan CSS untuk mengontrol kecepatan, durasi, arah, waktu mulai, dll.

Tidak peduli apakah Anda ingin animasi Anda bergerak ke atas atau ke bawah, properti arah animasi CSS dalam pengembangan web akan memungkinkan Anda untuk mencapai tujuan Anda.

Apakah Anda baru dalam hal ini? Tidak perlu khawatir! Di blog ini, Anda akan mengetahui semua tentang properti animasi CSS.

Sekarang, tanpa basa-basi lagi, mari kita pahami apa itu animasi CSS, beserta penggunaannya.

Apa itu properti arah animasi CSS?

Properti arah animasi CSS adalah semua tentang arah animasi. Setelah Anda mengatur properti ini, Anda dapat dengan mudah mengatur siklus animasi mundur, maju, atau dalam arah alternatif.

Sekarang, mari kita lihat arah animasi yang berbeda:

• arah animasi: normal;
• arah animasi: mundur;
• animasi-arah: alternatif-mundur;
• animasi-arah: alternatif;

Untuk membantu Anda lebih jauh, saya telah membagikan sintaks properti animasi-arah. Semoga sintaks ini akan membantu Anda membuat animasi seperti seorang profesional.

/* Animasi tunggal dari properti animasi CSS */

• arah animasi: normal;
• arah animasi: mundur;
• animasi-arah: alternatif;
• animasi-arah: alternatif-mundur;

/* Beberapa animasi dari properti animasi CSS */

• arah animasi: normal, mundur;
• animasi-arah: alternatif, mundur, normal;

/* Nilai Global dari properti animasi CSS */

• animasi-arah: mewarisi;
• arah animasi: inisial;
• animasi-arah: kembali;
• arah animasi: tidak disetel;

Sekarang setelah Anda mengetahui berbagai properti animasi CSS, saatnya untuk memahami nilai properti Animasi CSS.

Nilai properti Animasi CSS

Normal

Jika Anda menggunakan properti ini, animasi akan diputar ke depan. Ini berarti bahwa untuk setiap siklus animasi, animasi akan diatur ulang ke keadaan awal dan akan dimulai lagi.

Nilai -" Normal" pada dasarnya adalah nilai default dari properti animasi-arah di CSS. Jadi jika Anda tidak menyetel properti ini, maka secara default, properti akan diputar ke depan.

Membalik

Animasi terbalik adalah semua tentang animasi yang dilakukan dalam arah terbalik setiap siklus. Dalam gaya ini, langkah animasi dan fungsi pengaturan waktu dilakukan mundur.

Misalnya, fungsi pewaktuan masuk menjadi kemudahan keluar.

Bergantian

Animasi alternatif membalikkan arah di setiap siklus, dengan iterasi pertama dalam arah maju . Hitungannya adalah untuk menentukan apakah suatu siklus ganjil atau genap dimulai pada satu.

Alternatif-terbalik

Pembalikan alternatif membalikkan arah setiap siklus, dengan iterasi pertama diputar mundur . Hitungannya adalah untuk menentukan apakah suatu siklus genap atau ganjil, dimulai dari satu.

CSS Singkatan untuk animasi-arah

Anda akan takjub mengetahui bahwa Anda juga dapat mengatur berbagai properti animasi, termasuk arah animasi, yang dapat dilakukan dengan menggunakan properti CSS singkatan animasi.

Properti singkatan animasi CSS menerapkan animasi antar gaya. Ini adalah metode singkatan untuk mengatur semua properti animasi seperti nama-animasi, durasi-animasi, fungsi waktu-animasi, penundaan-animasi, penghitungan-iterasi-animasi, arah-animasi, mode-isi-animasi, dan animasi-bermain- negara.

Masalah Umum Animasi CSS

Apakah animasi Anda tidak berfungsi seperti yang Anda inginkan atau tidak berfungsi sama sekali, berikut adalah beberapa alasan masalah dan cara mengatasinya:

Tidak ada aturan @keyframes

Dalam animasi CSS, aturan @keyframes menentukan tampilan animasi. Lebih khusus lagi, ini mendefinisikan gaya elemen mana yang berubah dan kapan. Tanpa aturan ini, elemen Anda tidak akan memiliki animasi untuk digunakan. Jadi lain kali, periksa apakah aturan @keyframes Anda ada dan apakah namanya cocok dengan nama animasi untuk elemen yang ditargetkan.

Durasi animasi tidak disetel

Misalkan Anda telah menetapkan aturan keyframes ke elemen tersebut, tetapi tetap tidak muncul untuk diputar jika Anda belum menyetel durasi animasi. Secara default, durasi nol detik adalah siklus animasi CSS.

Untuk mengganti siklus ini, Anda perlu memasukkan aturan durasi animasi di elemen yang Anda targetkan dengan nilai detik, sama seperti di blok yang sama dengan nama animasi.

Animasi dimulai terlalu cepat

Terkadang Anda mungkin perlu menampilkan penundaan cepat lebih awal dari awal animasi untuk pengalaman konsumen yang lebih tinggi. Selesaikan ini dengan barang-barang animasi-tunda.

Properti CSS Non-Animasi

Alasan lain untuk animasi tidak berfungsi mungkin karena Anda mencoba menganimasikan properti CSS yang tidak dapat dianimasikan.

Animasi CSS tidak didukung

Lukisan animasi CSS pada browser seluler dan komputer maksimum saat ini. Namun, animasi Anda tidak akan berfungsi jika Anda menggunakan browser lama atau model browser yang belum diperbarui selama bertahun-tahun, pasti karena kehilangan bantuan browser.

Jika Anda telah memperbarui browser dan Anda masih mengalami masalah, coba sertakan kebijakan animasi Anda dengan awalan pemasok lebih lanjut dalam kebijakan asli Anda dan coba animasi lagi.

Singkatan CSS ditulis dengan tidak benar

Singkatan CSS adalah cara yang bagus untuk menuliskan CSS pembersih dan mengurangi jumlah kode dalam file Anda. Barang-barang animasi adalah singkatan untuk rumah-rumah CSS itu:

• periode animasi
• animasi-panggilan
• animasi-tunda
• animasi-arah
• animasi-isi-mode
• animasi-iterasi-bergantung
• animasi-play-nation
• Fungsi waktu animasi

Dua nilai — satu untuk periode animasi dan satu untuk panggilan animasi — diperlukan. Selain itu, urutan nilai menentukan harga yang ditetapkan untuk barang animasi mana.

Nilai yang tidak selaras akan menghasilkan animasi yang berperilaku berbeda dari yang Anda harapkan. Jadi, jika penggunaan singkatan animasi termasuk, pastikan bahwa nilainya diindeks dalam urutan yang benar.

Performa Lambat

Animasi CSS cenderung lebih tinggi untuk kinerja keseluruhan daripada berbagai jenis animasi internet. Namun, sekarang tidak lagi semua animasi CSS sama, dan beberapa pola yang hidup secara bertahap akan menurunkan kinerja keseluruhan lebih besar daripada yang lain.

Kebanyakan animasi CSS yang mudah tidak memiliki pengaruh besar pada waktu pemuatan halaman web. Namun, semakin besar hasil yang Anda unggah dalam animasi, semakin besar kemungkinan Anda mengalami masalah kinerja secara keseluruhan.

Untuk menghindari kinerja keseluruhan yang buruk, Google merekomendasikan untuk membatasi penggunaan animasi yang menyebabkan pengecatan ulang. Paint adalah browser yang membuat tampilan piksel halaman web yang terlihat-dengan bantuan piksel-piksel di layar. Paints menggunakan kekuatan pemrosesan yang sangat besar, jadi Anda harus membatasi berbagai macam repaints karena animasi sebanyak yang Anda bisa.

Sayangnya, rumah CSS animasi maksimum menyebabkan pengecatan ulang saat diubah. Pengecualian untuk transformasi ini (untuk hal-hal seperti skala, rotasi, dan posisi) dan opasitas, yang mungkin hidup dengan dampak minimal pada kinerja keseluruhan. Berikut adalah referensi yang rumah CSS menyebabkan pengecatan ulang sementara hidup.

Namun, jangan biarkan itu menghalangi Anda untuk menghapus animasi sama sekali. Jika Anda mengalami masalah kecepatan, itu mungkin karena Anda ingin mengeksekusi banyak segera atau menggunakan animasi untuk setidaknya satu detail besar atau organisasi elemen.

Di situs web, animasi CSS adalah yang terbaik sementara digunakan secara halus untuk mempercantik pengalaman, jadi ingat kembali apakah Anda ingin animasi kompleks berinteraksi dengan pengunjung atau tidak.

Kata terakhir

Ya, HubSpot memungkinkan Anda untuk mengontrol arah animasi dengan menggunakan kode CSS yang tepat. Sehat! Saya sangat setuju bahwa properti arah animasi CSS adalah satu hal yang tidak disadari banyak orang.

Tapi ya, setelah membaca blog ini, Anda pasti akan terbiasa dengan cara mengontrol animasi dan memberikan tampilan yang menarik dan ramah pengguna pada desain situs web Anda. Jadi, apa yang Anda tunggu? Bersiaplah untuk membangun desain yang menarik bagi audiens target Anda.

Masih membutuhkan bantuan dalam mendesain situs, jangan ragu untuk menghubungi kami. Pakar kami akan membantu Anda dengan hal yang sama.

Editor: Divya