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
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.
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
Untuk menggunakan @keyframes
dalam aturan CSS, tentukan berbagai properti animasi atau, gunakan properti singkatan animation
.
animation-duration
.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
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
.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
.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 darialternate
.
animation-delay
.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
.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
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 untukforwards
danbackwards
.
Singkatan animation
Daripada menentukan semua properti secara terpisah,
Anda dapat menentukannya dalam singkatan animation
,
yang memungkinkan Anda menentukan properti animasi dalam urutan berikut:
animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode
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?
SWOOP
dan swoop
dapat berdampingan.Kata kunci from
dan to
sama dengan
start
dan end
.0%
dan 100%
.from
sama dengan 0%
dan to
sama dengan 100%.0
dan 1
animation-timing-function
juga dikenal sebagai
Berapa jumlah minimum keyframe yang diperlukan dalam animasi @keyframes
?