Animasi - Trik CSS

Anonim

The animationproperti di CSS dapat digunakan untuk bernyawa banyak properti CSS lainnya seperti color, background-color, height, atau width. Setiap animasi perlu didefinisikan dengan @keyframesat-rule yang kemudian dipanggil dengan animationproperti, seperti:

.element ( animation: pulse 5s infinite; ) @keyframes pulse ( 0% ( background-color: #001F3F; ) 100% ( background-color: #FF4136; ) )

Setiap @keyframesat-rule menentukan apa yang harus terjadi pada momen tertentu selama animasi. Misalnya, 0% adalah awal animasi dan 100% adalah akhir. Bingkai utama ini kemudian dapat dikontrol baik oleh animationproperti singkatan , atau delapan sub-propertinya, untuk memberikan lebih banyak kontrol atas bagaimana bingkai utama tersebut harus dimanipulasi.

Sub-properti

  • animation-name: mendeklarasikan nama @keyframesat-rule yang akan dimanipulasi.
  • animation-duration: lamanya waktu yang dibutuhkan animasi untuk menyelesaikan satu siklus.
  • animation-timing-function: menetapkan kurva percepatan preset seperti easeatau linear.
  • animation-delay: waktu antara elemen yang dimuat dan awal rangkaian animasi (contoh keren).
  • animation-direction: mengatur arah animasi setelah siklus. Defaultnya disetel ulang pada setiap siklus.
  • animation-iteration-count: berapa kali animasi harus dilakukan.
  • animation-fill-mode: set nilai mana yang diterapkan sebelum / sesudah animasi.
    Misalnya, Anda dapat mengatur status terakhir animasi agar tetap di layar, atau Anda dapat mengaturnya untuk beralih kembali ke sebelum animasi dimulai.
  • animation-play-state: jeda / putar animasi.

Sub-properti ini kemudian dapat digunakan seperti ini:

@keyframes stretch ( /* declare animation actions here */ ) .element ( animation-name: stretch; animation-duration: 1.5s; animation-timing-function: ease-out; animation-delay: 0s; animation-direction: alternate; animation-iteration-count: infinite; animation-fill-mode: none; animation-play-state: running; ) /* is the same as: */ .element ( animation: stretch 1.5s ease-out 0s alternate infinite none running; )

Berikut daftar lengkap nilai yang dapat diambil masing-masing sub-properti ini:

animation-timing-function kemudahan, kemudahan-keluar, kemudahan-masuk, kemudahan-keluar, linier, kubik-bezier (x1, y1, x2, y2) (misalnya kubik-bezier (0,5, 0,2, 0,3, 1,0))
animation-duration Xs atau Xms
animation-delay Xs atau Xms
animation-iteration-count X
animation-fill-mode maju, mundur, keduanya, tidak ada
animation-direction normal, bergantian
animation-play-state berhenti, berlari, berlari

Beberapa langkah

Jika animasi memiliki properti awal dan akhir yang sama, sebaiknya pisahkan dengan koma nilai 0% dan 100% di dalamnya @keyframes:

@keyframes pulse ( 0%, 100% ( background-color: yellow; ) 50% ( background-color: red; ) )

Beberapa animasi

Anda juga dapat memisahkan nilai dengan koma untuk mendeklarasikan beberapa animasi pada selektor. Pada contoh di bawah ini, kami ingin mengubah warna lingkaran @keyframesementara juga mendorongnya dari sisi ke sisi dengan yang lain.

.element ( animation: pulse 3s ease infinite alternate, nudge 5s linear infinite alternate; )

Performa

Menganimasikan sebagian besar properti merupakan masalah kinerja, jadi kita harus melanjutkan dengan hati-hati sebelum menganimasikan properti apa pun. Namun, ada kombinasi tertentu yang dapat dianimasikan dengan aman:

  • transform: translate()
  • transform: scale()
  • transform: rotate()
  • opacity

Properti mana yang bisa dianimasikan?

MDN memiliki daftar properti CSS yang dapat dianimasikan. Properti beranimasi cenderung pada warna dan angka. Contoh properti yang tidak dapat dianimasikan adalah background-image.

Dukungan browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
4 * 5 * 10 12 5.1 *

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4 * 6.0-6.1 *

Informasi lebih lanjut

  • animasi di MDN
  • Menggunakan animasi CSS
  • animasi di W3C
  • Penghapusan jank untuk performa rendering yang lebih baik
  • Animasi web sedang bekerja
  • Lima cara untuk menghidupkan secara bertanggung jawab
  • Melompat Status, Penundaan Negatif, Animasi Asal, dan Lainnya
  • Memulai animasi CSS di tengah jalan
  • Animasi berkinerja tinggi