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
: Sepertialternate
, 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:
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 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
Apakah nama atau ID kustom animasi @keyframes
peka huruf besar/kecil?
SWOOP
dan swoop
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 biasa disebut sebagai:
Berapa jumlah minimum keyframe yang diperlukan dalam animasi @keyframes
?