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
: Sepertialternate
, 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:
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 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
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 dalam animasi @keyframes
?