Animasi

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.

Status animasi pulser selama jangka waktu 1 detik

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

Diagram yang sama seperti sebelumnya, tetapi kali ini, dengan keyframe

@keyframes

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

@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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

Untuk menggunakan @keyframes dalam aturan CSS, Anda dapat menentukan berbagai properti animasi satu per satu, atau menggunakan properti singkat animation.

animation-duration

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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.

Bézier pada diagram progresi vs. waktu

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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.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: Seperti alternate, tetapi animasi dimulai dengan linimasa yang berjalan mundur.

animation-delay

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

.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

Browser Support

  • Chrome: 43.
  • Edge: 12.
  • Firefox: 16.
  • Safari: 9.

Source

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:

  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 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?

Ya
Tidak

Kata kunci from dan to sama dengan:

0 dan 1
0% dan 100%.
start dan end.

animation-timing-function juga dikenal sebagai:

Pengaturan waktu dinamis
Easing
Keterlambatan

Berapa jumlah minimum keyframe yang diperlukan di dalam animasi @keyframes?

3
2
4
1