Animasi

Animasi merupakan cara yang bagus untuk menyoroti elemen-elemen interaktif, dan menambahkan daya tarik dan menyenangkan untuk desain Anda. Dalam modul ini, temukan cara menambahkan dan mengontrol efek animasi dengan CSS.

Terkadang Anda melihat {i>helper<i} kecil pada antarmuka yang memberikan beberapa informasi tentang bagian tempat mereka berada saat Anda mengkliknya. Saluran ini sering kali memiliki animasi berdenyut untuk secara halus memberitahu Anda bahwa informasi tersedia dan akan berinteraksi dengan pengguna. Modul ini menunjukkan cara membuat {i>helper<i} tersebut, dan animasi lainnya, menggunakan di CSS.

Ikon tarik adalah salah satu cara untuk memastikan pengguna Anda memperhatikan informasi penting.

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

Apa yang dimaksud dengan keyframe?

Pada sebagian besar alat animasi, keyframe adalah mekanisme yang Anda gunakan untuk menetapkan animasi status ke stempel waktu pada linimasa.

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

Status animasi yang berkedip.

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

Animasi berkedip dengan keyframe.

@keyframes

Dukungan Browser

• 43
• 12 tahun
• 16
• 9

Sumber

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, memungkinkan Anda mereferensikan aturan keyframe di tempat lain dalam kode CSS Anda.

Catatan: <custom-ident> digunakan di berbagai tempat di CSS untuk memungkinkan Anda memberikan nama Anda sendiri. ID ini peka huruf besar/kecil, dan terkadang kasus, ada kata-kata yang tidak dapat Anda gunakan. Misalnya, saat memberi nama garis dalam CSS Petak, Anda tidak dapat menggunakan kata span.

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 di dalam aturan keyframe untuk merepresentasikan perubahan untuk setiap keyframe ini.

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

Coba edit aturan pulse untuk melihat bagaimana animasinya perubahan.

Properti animation

Dukungan Browser

• 43
• 12 tahun
• 16
• 9

Sumber

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

animation-duration

Dukungan Browser

• 43
• 12 tahun
• 16
• 9

Sumber

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

animation-duration menentukan durasi linimasa @keyframes sebagai nilai waktu. Setelan defaultnya adalah 0 detik, yang berarti animasi akan tetap berjalan, tetapi akan terlalu cepat untuk Anda lihat. Anda tidak dapat menggunakan nilai waktu negatif.

animation-timing-function

Dukungan Browser

• 43
• 12 tahun
• 16
• 9

Sumber

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 yang bervariasi selama animation-duration, dan membuat elemen memantul jika browser menghitung nilai di luar nilai yang ditetapkan dalam @keyframes.

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

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

Coba ubah fungsi pengaturan waktu animasi digunakan.

Nilai fungsi easing tampak melengkung karena easing dihitung menggunakan Kurva Bézier, jenis fungsi yang digunakan untuk membuat model kecepatan. Setiap waktu kata kunci fungsi, seperti ease, merujuk ke kurva Bézier yang telah ditentukan. Pada 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 ini memetakan setiap bagian kurva di sepanjang sumbu X dan Y.

Contoh kurva Bézier.

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

Fungsi easing steps

Terkadang Anda mungkin ingin melakukan kontrol animasi yang lebih terperinci dengan bergerak dalam interval dan 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 jumlah langkah. Jika ada jumlah sebagai langkah, setiap keyframe diputar secara berurutan selama durasi langkahnya, tanpa transisi antarstatus. Jika jumlah keyframe lebih sedikit daripada langkah, browser akan menambahkan langkah-langkah di antara keyframe bergantung pada argumen kedua.

Argumen kedua adalah arah. Jika kebijakan ini disetel ke end, yang merupakan default, langkah akan selesai di akhir linimasa Anda. Jika kebijakan ini disetel ke start, langkah pertama animasi selesai begitu dimulai, yang berarti berakhir satu langkah lebih awal dari end.

Bandingkan animasi dengan dan tanpa langkah-langkah.

animation-iteration-count

Dukungan Browser

• 43
• 12 tahun
• 16
• 9

Sumber

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

Animation-iteeration-count menentukan berapa kali linimasa @keyframes harus berjalan selama animasi. Secara {i>default<i}, ini adalah 1, yang berarti animasi akan berhenti ketika mencapai akhir dari {i>timeline<i}. Nilai ini tidak boleh berupa angka negatif.

Coba ubah jumlah iterasi untuk animasi ini.

Untuk membuat loop animasi, tetapkan jumlah iterasi ke infinite. Ini adalah cara animasi berdenyut-denyut dari awal pelajaran ini.

Animasi yang berkedip-kedip berulang tanpa batas.

animation-direction

Dukungan Browser

• 43
• 12 tahun
• 16
• 9

Sumber

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

Anda dapat menyetel arah linimasa yang berjalan di atas keyframe dengan animation-direction, yang menggunakan nilai berikut:

• normal: nilai default, yang bersifat meneruskan.
• reverse: berjalan mundur di atas linimasa Anda.
• alternate: untuk setiap iterasi animasi, linimasa berganti-ganti bergerak maju dan berjalan mundur.
• alternate-reverse: Seperti alternate, tetapi animasinya dimulai dengan {i>timeline <i}yang bergerak mundur.

Coba ubah arah animasi.

animation-delay

Dukungan Browser

• 43
• 12 tahun
• 16
• 9

Sumber

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

animasi-jeda menentukan lamanya browser menunggu sebelum memulai animasi. Seperti properti animation-duration, properti ini memerlukan nilai waktu.

Tidak seperti animation-duration, Anda dapat menentukan animation-delay sebagai negatif yang membuat animasi dimulai pada titik yang sesuai dalam {i>timeline<i} (rentang waktu). Misalnya, jika animasi berdurasi 10 detik dan Anda menyetel animation-delay hingga -5s, animasi akan dimulai dari pertengahan {i>timeline<i} (rentang waktu).

Coba ubah penundaan animasi.

animation-play-state

Dukungan Browser

• 43
• 12 tahun
• 16
• 9

Sumber

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

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

Tahan kursor di atas elemen animasi untuk menjeda animasi.

animation-fill-mode

Dukungan Browser

• 43
• 12 tahun
• 16
• 9

Sumber

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

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

Coba ubah mode isi.

Singkatan animation

Daripada menetapkan setiap properti secara terpisah, Anda dapat mendefinisikannya dalam Singkatan animation, yang memungkinkan Anda menentukan properti animasi di 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 operasi untuk memilih gerakan yang lebih sedikit saat berinteraksi dengan aplikasi dan situs web. Anda dapat mendeteksi preferensi ini menggunakan preferensi-reduced-motion kueri media:

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

Ini belum tentu merupakan preferensi untuk tanpa animasi. Ini adalah preferensi untuk animasi, khususnya animasi yang tidak terlalu tak terduga. Anda dapat mempelajari preferensi ini dan performa keseluruhan dalam panduan animasi.

Coba contoh animasi yang dikurangi.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang animasi

Apakah nama atau ID kustom animasi @keyframes peka huruf besar/kecil?

Ya

🎉

Tidak

CSS tidak mengizinkan 2 animasi memiliki nama yang sama, tetapi CSS memungkinkan SWOOP dan swoop untuk berdampingan.

Kata kunci from dan to sama dengan:

start dan end.

Coba lagi.

0% dan 100%.

from sama dengan 0% dan to sama dengan 100%.

0 dan 1

Coba lagi.

animation-timing-function juga dikenal sebagai:

Pengaturan waktu dinamis

Coba lagi.

Keterlambatan

Coba lagi.

Easing

🎉

Berapa jumlah minimum keyframe yang diperlukan dalam animasi @keyframes?

1

Browser akan menggunakan status elemen saat ini sebagai keyframe, sehingga diperlukan minimal 1 keyframe.

2

Coba lagi.

3

Coba lagi.

4

Coba lagi.