The CSS Podcast - 022: Animation
Terkadang Anda melihat bantuan kecil di antarmuka yang saat diklik, memberikan informasi bermanfaat tentang bagian tertentu tersebut. Elemen ini sering kali memiliki animasi yang berdenyut untuk memberi tahu Anda secara halus bahwa informasi ada dan harus berinteraksi dengannya. 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 kompleks berbasis waktu.
Apa yang dimaksud dengan keyframe?
Di sebagian besar alat animasi, keyframe adalah mekanisme yang Anda gunakan untuk menetapkan status animasi ke stempel waktu pada linimasa.
Misalnya, berikut adalah linimasa untuk titik "helper" yang berkedip. Animasi berjalan selama 1 detik dan memiliki 2 status.
Ada titik tertentu tempat setiap status animasi ini dimulai dan berakhir. Anda memetakan hal ini di linimasa dengan keyframe.
@keyframes
@keyframes
CSS
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 selama jangka waktu tersebut. Dalam contoh helper pulsa, ada dua status yang diterjemahkan ke dua keyframe. Artinya, Anda memiliki dua posisi di dalam aturan keyframe untuk mewakili 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 properti
animasi satu per satu, atau menggunakan properti singkat
animation
.
animation-duration
.my-element {
animation-duration: 10s;
}
Properti animation-duration menentukan durasi linimasa @keyframes
sebagai nilai waktu.
Nilai defaultnya adalah 0 detik, yang berarti animasi masih berjalan, tetapi 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, sehingga animasi berjalan dengan kecepatan variabel selama
animation-duration
, dan membuat elemen tampak memantul jika browser
menghitung nilai di luar yang ditentukan 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 kata kunci fungsi
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 ini memetakan setiap bagian kurva di sepanjang sumbu X dan Y.
Memahami kurva Bézier itu rumit. Alat visual, seperti generator ini oleh Lea Verou, sangat membantu.
Fungsi easing steps
Terkadang, Anda mungkin ingin mengambil kontrol yang lebih terperinci atas animasi dengan
bergerak dalam interval, bukan di 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 angka. Jika jumlah keyframe sama dengan jumlah langkah, setiap keyframe akan diputar secara berurutan selama durasi langkahnya yang tepat, tanpa transisi antarstatus. Jika jumlah keyframe lebih sedikit daripada langkah, browser akan menambahkan langkah di antara keyframe, bergantung pada argumen kedua.
Argumen kedua adalah arah. Jika ditetapkan ke end
, yang merupakan
nilai default, langkah-langkah akan selesai di akhir linimasa Anda. Jika disetel ke start
,
langkah pertama animasi akan selesai segera setelah dimulai, yang berarti
animasi akan berakhir satu langkah lebih awal dari end
.
animation-iteration-count
.my-element {
animation-iteration-count: 10;
}
Properti animation-iteration-count
menentukan frekuensi timeline @keyframes
harus berjalan selama
animasi. Secara default, nilai ini adalah 1, yang berarti animasi berhenti saat
mencapai akhir linimasa Anda. Nilai ini tidak boleh berupa angka negatif.
Untuk membuat loop animasi, tetapkan jumlah iterasi ke infinite
. Ini adalah cara kerja
animasi denyut dari awal pelajaran ini.
animation-direction
.my-element {
animation-direction: reverse;
}
Anda dapat menetapkan arah timeline yang berjalan di atas keyframe dengan animation-direction, yang menggunakan nilai berikut:
normal
: nilai default, yaitu maju.reverse
: berjalan mundur di sepanjang linimasa Anda.alternate
: untuk setiap iterasi animasi, linimasa berganti antara berjalan maju dan berjalan mundur.alternate-reverse
: Sepertialternate
, tetapi animasi dimulai dengan linimasa yang berjalan mundur.
animation-delay
.my-element {
animation-delay: 5s;
}
Properti animation-delay
menentukan berapa lama browser menunggu sebelum memulai animasi.
Seperti properti animation-duration
, properti ini menerima nilai waktu.
Tidak seperti animation-duration
, Anda dapat menentukan animation-delay
sebagai nilai
negatif, yang membuat animasi dimulai pada titik yang sesuai dalam
linimasa Anda. Misalnya, jika animasi berdurasi 10 detik dan Anda menetapkan
animation-delay
ke -5s
, animasi akan dimulai dari pertengahan
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
. Jika Anda menetapkannya ke paused
, animasi akan dijeda.
animation-fill-mode
Properti animation-fill-mode menentukan nilai mana di linimasa @keyframes
yang tetap ada sebelum animasi dimulai atau setelah berakhir. Nilai defaultnya adalah none
, yang berarti bahwa
saat animasi selesai, nilai dalam 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 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 operasi mereka untuk 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;
}
}
Hal ini tidak selalu berarti preferensi untuk tidak menggunakan animasi. Ini adalah preferensi untuk lebih sedikit animasi, terutama animasi yang tidak terduga. Anda dapat mempelajari lebih lanjut preferensi ini dan performa secara keseluruhan di panduan animasi kami.
Memeriksa pemahaman Anda
Uji pengetahuan Anda tentang animasi
Apakah nama atau ID kustom animasi @keyframes
peka huruf besar/kecil?
Kata kunci from
dan to
sama dengan:
0%
dan 100%
.0
dan 1
start
dan end
.animation-timing-function
juga dikenal sebagai:
Berapa jumlah minimum keyframe yang diperlukan di dalam animasi @keyframes
?