Animasi

Animasi adalah cara yang bagus untuk menyoroti elemen interaktif, dan menambahkan daya tarik dan kesenangan pada desain Anda. Dalam modul ini, pelajari cara menambahkan dan mengontrol efek animasi dengan CSS.

Terkadang, Anda akan melihat helper kecil pada antarmuka yang menyediakan beberapa informasi berguna tentang bagian yang memuatnya saat Anda mengkliknya. Objek ini sering kali memiliki animasi yang berkedip-kedip untuk memberi tahu Anda secara halus bahwa informasi ada di sana dan harus berinteraksi dengan informasi. Modul ini menunjukkan cara membuat helper tersebut, dan animasi lainnya, menggunakan CSS.

Anda dapat menggunakan CSS untuk menetapkan urutan animasi dengan keyframe. Urutan ini dapat berupa animasi dasar satu status atau urutan berbasis waktu yang kompleks.

Apa yang dimaksud dengan keyframe?

Di sebagian besar fitur animasi, keyframe adalah mekanisme yang Anda gunakan untuk menetapkan status animasi ke stempel waktu di linimasa.

Misalnya, berikut adalah linimasa untuk titik "helper" yang berkedip-kedip. Animasi ini berjalan selama 1 detik dan memiliki 2 status.

Ada titik tertentu di mana setiap status animasi ini dimulai dan berakhir. Anda memetakan ini di linimasa dengan keyframe.

@keyframes

CSS @keyframes didasarkan pada konsep yang sama dengan keyframe animasi.

Berikut adalah contoh dengan dua status:

@keyframes my-animation {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0px);
  }
}

Bagian penting pertama adalah ID kustom (custom-ident), nama aturan keyframe. ID dalam contoh ini adalah my-animation. ID kustom berfungsi seperti nama fungsi, sehingga Anda dapat mereferensikan aturan keyframe di tempat lain dalam kode CSS.

Di dalam aturan keyframe, from dan to adalah kata kunci yang mewakili 0% dan 100%, yang merupakan awal dan akhir animasi. Anda dapat membuat ulang aturan yang sama seperti ini:

@keyframes my-animation {
    0% {
        transform: translateY(20px);
    }
    100% {
        transform: translateY(0px);
    }
}

Anda dapat menambahkan posisi sebanyak yang Anda inginkan di sepanjang jangka waktu. Dalam contoh helper yang berkedip, ada dua status yang diterjemahkan menjadi dua keyframe. Artinya, Anda memiliki dua posisi dalam aturan keyframe untuk menunjukkan perubahan pada setiap keyframe ini.

@keyframes pulse {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.4;
  }
}

Properti animation

Untuk menggunakan @keyframes dalam aturan CSS, Anda dapat menentukan berbagai properti animasi satu per satu, atau menggunakan properti singkat animation.

animation-duration

.my-element {
    animation-duration: 10s;
}

Properti animasi-duration menentukan berapa lama linimasa @keyframes sebagai nilai waktu. Nilai defaultnya adalah 0 detik, yang berarti animasi masih berjalan, tetapi akan terlalu cepat untuk Anda lihat. Anda tidak dapat menggunakan nilai waktu negatif.

animation-timing-function

Untuk membantu membuat ulang gerakan alami dalam animasi, Anda dapat menggunakan fungsi pengaturan waktu yang menghitung kecepatan animasi di setiap titik. Nilai yang dihitung sering kali melengkung, membuat animasi berjalan dengan kecepatan bervariasi selama animation-duration, dan membuat elemen tampak memantul jika browser menghitung nilai yang melebihi yang ditentukan dalam @keyframes.

Ada beberapa kata kunci yang tersedia sebagai preset di CSS, yang digunakan sebagai nilai untuk animasi-timing-function: linear, ease, ease-in, ease-out, ease-in-out.

.my-element {
    animation-timing-function: ease-in-out;
}

Nilai fungsi easing tampak melengkung karena easing dihitung menggunakan kurva Bézier, jenis fungsi yang digunakan untuk memodelkan kecepatan. Setiap kata kunci fungsi pengaturan waktu, seperti ease, mereferensikan kurva Bézier yang telah ditentukan. Dalam CSS, Anda dapat menentukan kurva Bézier secara langsung menggunakan fungsi cubic-bezier(), yang menerima empat nilai angka: x1, y1, x2, y2.

.my-element {
    animation-timing-function: cubic-bezier(.42, 0, .58, 1);
}

Nilai-nilai ini memetakan setiap bagian kurva di sepanjang sumbu X dan Y.

Memahami kurva Bézier itu rumit. Alat visual, seperti generator karya Lea Verou ini, sangat membantu.

Fungsi easing steps

Terkadang, Anda mungkin ingin mengontrol animasi yang lebih terperinci dengan bergerak secara interval, bukan sepanjang kurva. Fungsi easing steps() memungkinkan Anda membagi linimasa menjadi interval yang ditentukan dengan durasi yang sama.

.my-element {
    animation-timing-function: steps(10, end);
}

Argumen pertama adalah langkah jumlah. Jika ada jumlah keyframe yang sama dengan langkah, setiap keyframe akan diputar secara berurutan selama durasi langkah yang tepat, tanpa transisi antarstatus. Jika keyframe lebih sedikit daripada langkah, browser akan menambahkan langkah-langkah di antara keyframe, bergantung pada argumen kedua.

Argumen kedua adalah arah. Jika disetel ke end, yang merupakan default, langkah-langkah akan selesai di akhir linimasa Anda. Jika ditetapkan ke start, langkah pertama animasi Anda akan selesai segera setelah dimulai, yang berarti langkah tersebut berakhir satu langkah lebih awal dari end.

animation-iteration-count

.my-element {
    animation-iteration-count: 10;
}

Properti animasi-iterasi-count menentukan berapa kali linimasa @keyframes harus dijalankan selama animasi. Secara default, nilainya adalah 1, yang berarti animasi akan berhenti saat mencapai akhir linimasa Anda. Nilai ini tidak boleh berupa angka negatif.

Untuk membuat animasi berulang, tetapkan jumlah iterasi ke infinite. Ini adalah cara kerja animasi yang berkedip dari awal pelajaran ini.

animation-direction

.my-element {
    animation-direction: reverse;
}

Anda dapat menetapkan arah linimasa di atas keyframe dengan animasi-direction, yang menggunakan nilai berikut:

• normal: nilai default, yang maju.
• reverse: berjalan mundur di linimasa.
• alternate: untuk setiap iterasi animasi, linimasa berganti-ganti antara berjalan maju dan berjalan mundur.
• alternate-reverse: Seperti alternate, tetapi animasi dimulai dengan linimasa berjalan mundur.

animation-delay

.my-element {
    animation-delay: 5s;
}

Properti Animation-Penundaan menentukan berapa lama browser menunggu sebelum memulai animasi. Seperti properti animation-duration, proses ini memerlukan nilai waktu.

Tidak seperti animation-duration, Anda dapat menentukan animation-delay sebagai nilai negatif, yang membuat animasi dimulai pada titik yang sesuai di linimasa Anda. Misalnya, jika animasi berdurasi 10 detik dan Anda menetapkan animation-delay ke -5s, animasi akan dimulai dari setengah jalan pada linimasa Anda.

animation-play-state

.my-element:hover {
    animation-play-state: paused;
}

Properti animasi-play-state memungkinkan Anda memutar dan menjeda animasi. Nilai defaultnya adalah running. Jika Anda menyetelnya ke paused, animasi akan dijeda.

animation-fill-mode

Properti animasi-fill-mode menentukan nilai mana dalam linimasa @keyframes yang akan dipertahankan sebelum animasi dimulai atau setelah animasi berakhir. Nilai defaultnya adalah none, yang berarti bahwa saat animasi selesai, nilai dalam linimasa Anda akan dihapus. Opsi lainnya mencakup:

• forwards: Bingkai utama terakhir tetap ada, berdasarkan arah animasi.
• backwards: Keyframe pertama tetap ada, berdasarkan arah animasi.
• both: Keyframe pertama dan terakhir akan tetap ada.

Singkatan animation

Daripada menentukan setiap properti secara terpisah, Anda dapat menentukannya dalam singkatan animation, yang memungkinkan Anda menentukan properti animasi dalam urutan berikut:

1. animation-name
2. animation-duration
3. animation-timing-function
4. animation-delay
5. animation-iteration-count
6. animation-direction
7. animation-fill-mode
8. animation-play-state

.my-element {
    animation: my-animation 10s ease-in-out 1s infinite forwards forwards running;
}

Pertimbangan saat menggunakan animasi

Pengguna dapat menyetel sistem operasinya agar lebih memilih gerakan yang dikurangi saat berinteraksi dengan aplikasi dan situs. Anda dapat mendeteksi preferensi ini menggunakan kueri media prefers-reduced-motion:

@media (prefers-reduced-motion) {
  .my-autoplaying-animation {
    animation-play-state: paused;
  }
}

Ini belum tentu merupakan preferensi tanpa animasi. Ini adalah preferensi untuk lebih sedikit animasi, terutama animasi yang tidak terduga. Anda dapat mempelajari lebih lanjut preferensi dan performa keseluruhan ini di panduan animasi kami.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang animasi