Animasi

Animasi adalah cara yang bagus untuk menyoroti elemen interaktif, dan membuat desain Anda lebih menarik dan menyenangkan. Dalam modul ini, pelajari cara menambahkan dan mengontrol efek animasi dengan CSS.

Terkadang, Anda melihat helper kecil pada antarmuka yang saat diklik, memberikan beberapa informasi bermanfaat tentang bagian tertentu tersebut. Modul ini sering kali memiliki animasi yang berkedip-kedip untuk memberi tahu Anda secara halus bahwa informasi tersebut ada di sana dan pengguna harus berinteraksi dengan informasi tersebut. Bagaimana cara Anda melakukannya dengan CSS?

Dalam CSS, Anda dapat membuat jenis animasi ini menggunakan animasi CSS, yang memungkinkan Anda menetapkan urutan animasi, menggunakan keyframe. Animasi dapat berupa animasi satu status yang sederhana, atau bahkan urutan berbasis waktu yang kompleks.

Apa yang dimaksud dengan keyframe?

Dalam software animasi, CSS, dan sebagian besar alat lain yang memungkinkan Anda menganimasikan sesuatu, keyframe adalah mekanisme yang Anda gunakan untuk menetapkan status animasi ke stempel waktu, di sepanjang linimasa.

Mari kita gunakan "{i>pulser<i}" sebagai konteks untuk ini. Seluruh animasi berjalan selama 1 detik dan berjalan lebih dari 2 status.

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

@keyframes

Dukungan Browser

• 43
• 12
• 16
• 9

Sumber

Sekarang Anda mengetahui apa itu keyframe, pengetahuan tersebut akan membantu Anda memahami cara kerja aturan @keyframes CSS. Berikut adalah aturan dasar dengan dua status.

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

Bagian pertama yang perlu diperhatikan adalah ID kustom (ID kustom)—atau dalam istilah lainnya, nama aturan keyframe. ID aturan ini adalah my-animation. ID kustom berfungsi seperti nama fungsi. Seperti yang telah Anda pelajari di modul fungsi, Anda dapat mereferensikan aturan keyframe di tempat lain dalam kode CSS Anda.

Catatan: <custom-ident> digunakan di berbagai tempat di CSS, dan memungkinkan Anda memberikan nama Anda sendiri untuk berbagai hal. ID ini peka huruf besar/kecil, dan dalam beberapa kasus ada kata yang tidak dapat Anda gunakan. Misalnya, saat memberi nama baris di Petak CSS, 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. Dengan menggunakan konteks contoh "pulser", ada 2 status, yang diterjemahkan menjadi 2 keyframe. Artinya, Anda memiliki 2 posisi di dalam aturan keyframe untuk mewakili perubahan pada masing-masing keyframe tersebut.

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

Properti animation

Dukungan Browser

• 43
• 12
• 16
• 9

Sumber

Untuk menggunakan @keyframes dalam aturan CSS, tentukan berbagai properti animasi atau, gunakan properti singkatan animation.

animation-duration

Dukungan Browser

• 43
• 12
• 16
• 9

Sumber

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

Properti animation-duration menentukan durasi linimasa @keyframes. Harus berupa nilai waktu. Setelan defaultnya adalah 0 detik, yang berarti animasi masih berjalan, tetapi akan terlalu cepat untuk Anda lihat. Anda tidak dapat menambahkan nilai waktu negatif.

animation-timing-function

Dukungan Browser

• 43
• 12
• 16
• 9

Sumber

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

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 tampak melengkung dengan fungsi easing karena easing dihitung menggunakan kurva bézier, yang digunakan untuk memodelkan kecepatan. Setiap kata kunci fungsi pengaturan waktu, seperti ease, mereferensikan kurva bézier yang telah ditentukan sebelumnya. Di 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 memplot setiap bagian dari kurva di sepanjang sumbu X dan Y.

Memahami kurva bézier merupakan alat yang rumit dan alat visual, seperti generator Lea Verou ini sangat membantu.

Fungsi easing steps

Terkadang, Anda mungkin menginginkan kontrol animasi yang lebih terperinci, dan alih-alih bergerak di sepanjang kurva, Anda ingin bergerak secara interval. Fungsi easing steps() memungkinkan Anda membagi linimasa menjadi interval sama yang ditentukan.

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

Argumen pertama adalah berapa langkah. Jika langkah ditentukan sebagai 10 dan ada 10 keyframe, setiap keyframe akan diputar secara berurutan untuk durasi waktu yang tepat, tanpa transisi antar-status. Jika keyframe tidak cukup untuk setiap langkah, langkah di antara keyframe akan ditambahkan, bergantung pada argumen kedua.

Argumen kedua adalah arah. Jika disetel ke end, yang merupakan default, 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

Dukungan Browser

• 43
• 12
• 16
• 9

Sumber

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

Properti animation-iteration-count menentukan berapa kali linimasa @keyframes harus dijalankan. Secara default, nilainya adalah 1, yang berarti saat animasi mencapai akhir linimasa Anda, animasi tersebut akan berhenti di akhir. Angka tidak boleh berupa angka negatif.

Anda dapat menggunakan kata kunci infinite yang akan mengulang animasi Anda, yang merupakan cara kerja demo "pulser" dari awal pelajaran ini.

animation-direction

Dukungan Browser

• 43
• 12
• 16
• 9

Sumber

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

Anda dapat menetapkan arah linimasa di atas keyframe dengan animation-direction:

• normal: nilai default, yaitu maju.
• reverse: berjalan mundur di sepanjang linimasa.
• alternate: untuk setiap iterasi animasi, linimasa akan berjalan maju atau mundur secara berurutan.
• alternate-reverse: kebalikan dari alternate.

animation-delay

Dukungan Browser

• 43
• 12
• 16
• 9

Sumber

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

Properti animation- delay menentukan durasi tunggu sebelum memulai animasi. Seperti properti animation-duration, metode ini menerima nilai waktu.

Tidak seperti properti animation-duration, Anda dapat menentukannya sebagai nilai negatif. Jika Anda menetapkan nilai negatif, linimasa di @keyframes akan dimulai pada titik tersebut. Misalnya, jika animasi berdurasi 10 detik dan Anda menyetel animation-delay ke -5s, animasi akan dimulai dari setengah jalan di sepanjang linimasa.

animation-play-state

Dukungan Browser

• 43
• 12
• 16
• 9

Sumber

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

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

animation-fill-mode

Dukungan Browser

• 43
• 12
• 16
• 9

Sumber

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

• forwards: Keyframe terakhir akan dipertahankan, berdasarkan arah animasi.
• backwards: Keyframe pertama akan dipertahankan, berdasarkan arah animasi.
• both: mengikuti aturan untuk forwards dan backwards.

Singkatan animation

Daripada menentukan semua 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 bekerja dengan animasi

Pengguna dapat menentukan di sistem operasi bahwa mereka lebih suka mengurangi pengalaman gerakan saat mereka berinteraksi dengan aplikasi dan situs. Preferensi ini dapat dideteksi menggunakan kueri media prefers-reduced-motion.

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

Hal ini bukan berarti preferensi tanpa animasi, tetapi preferensi untuk mengurangi animasi— terutama yang tidak terduga. Anda dapat mempelajari preferensi dan performa keseluruhan ini lebih lanjut dengan panduan animasi ini.

Menguji pemahaman Anda

Uji pengetahuan Anda tentang animasi

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

Benar

🎉

Salah

CSS tidak mengizinkan 2 animasi memiliki nama yang sama, tetapi SWOOP dan swoop dapat 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.

Penundaan

Coba lagi.

Easing

🎉

Berapa jumlah minimum keyframe yang diperlukan dalam animasi @keyframes?

1

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

2

Coba lagi.

3

Coba lagi.

4

Coba lagi.