Animasi - Trik CSS

Anonim

The animationharta di CSS boleh digunakan untuk bernyawa banyak ciri-ciri CSS lain seperti color, background-color, height, atau width. Setiap animasi perlu didefinisikan dengan @keyframesat-rule yang kemudian disebut dengan animationproperti, seperti:

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

Setiap @keyframesat-aturan menentukan apa yang harus berlaku pada saat-saat tertentu semasa animasi. Sebagai contoh, 0% adalah permulaan animasi dan 100% adalah akhir. Kerangka utama ini kemudian dapat dikendalikan sama ada oleh sifat pendek animation, atau lapan sub-sifatnya, untuk memberi lebih banyak kawalan mengenai bagaimana kerangka utama tersebut harus dimanipulasi.

Sub-sifat

  • animation-name: menyatakan nama @keyframesat-rule untuk dimanipulasi.
  • animation-duration: jangka masa yang diperlukan untuk animasi menyelesaikan satu kitaran.
  • animation-timing-function: menetapkan keluk pecutan yang telah ditetapkan seperti easeatau linear.
  • animation-delay: masa antara elemen dimuat dan permulaan urutan animasi (contoh keren).
  • animation-direction: menetapkan arah animasi selepas kitaran. Lalai ditetapkan semula pada setiap kitaran.
  • animation-iteration-count: berapa kali animasi harus dilakukan.
  • animation-fill-mode: menetapkan nilai mana yang diterapkan sebelum / selepas animasi.
    Sebagai contoh, anda boleh menetapkan keadaan terakhir animasi agar tetap berada di layar, atau anda boleh menetapkannya untuk beralih kembali ke sebelum ketika animasi bermula.
  • animation-play-state: jeda / mainkan animasi.

Sub-sifat ini kemudian boleh digunakan seperti berikut:

@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 adalah senarai penuh nilai yang boleh diambil oleh setiap sub-sifat ini:

animation-timing-function kemudahan, kemudahan-keluar, kemudahan-dalam, kemudahan-dalam-keluar, linear, kubik-bezier (x1, y1, x2, y2) (contohnya cubic-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 ke hadapan, ke belakang, keduanya, tiada
animation-direction normal, bersilih ganti
animation-play-state berhenti sejenak, berlari, berlari

Pelbagai langkah

Sekiranya animasi mempunyai sifat awal dan akhir yang sama, ada baiknya memisahkan nilai 0% dan 100% dengan koma di dalam @keyframes:

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

Pelbagai animasi

Anda boleh memisahkan nilai dengan koma untuk menyatakan pelbagai animasi pada pemilih juga. Dalam contoh di bawah ini, kami ingin menukar warna bulatan @keyframesementara juga menggesernya dari sisi ke sisi yang lain.

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

Persembahan

Menghidupkan kebanyakan harta benda adalah perhatian prestasi, jadi kita harus berhati-hati sebelum menghidupkan harta benda apa pun. Namun, ada kombinasi tertentu yang dapat dianimasikan dengan selamat:

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

Properti mana yang boleh dianimasikan?

MDN mempunyai senarai sifat CSS yang boleh dianimasikan. Sifat animat cenderung warna dan nombor. Contoh harta yang tidak boleh dianimasikan adalah background-image.

Sokongan penyemak imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
4 * 5 * 10 12 5.1 *

Mudah Alih / Tablet

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

Maklumat lanjut

  • animasi di MDN
  • Menggunakan animasi CSS
  • animasi di W3C
  • Jank mengalahkan untuk prestasi persembahan yang lebih baik
  • Animasi web di tempat kerja
  • Lima cara untuk menghidupkan secara bertanggungjawab
  • Lompat Keadaan, Kelewatan Negatif, Animasi Asal dan Banyak Lagi
  • Memulakan animasi CSS pada pertengahan jalan
  • Animasi berprestasi tinggi