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.

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.

Ada titik tertentu di mana setiap status animasi ini dimulai dan berakhir. Anda memetakan hal 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, memungkinkan Anda mereferensikan aturan keyframe di tempat lain dalam kode CSS Anda.

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;
  }
}

Properti animation

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

animation-duration

.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

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;
}

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.

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.

animation-iteration-count

.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.

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

animation-direction

.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.

animation-delay

.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).

animation-play-state

.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.

animation-fill-mode

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.

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.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang animasi