Sintaks Animasi Kerangka Utama - Trik CSS

Anonim

Pengisytiharan & Penggunaan Asas

@-webkit-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-moz-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @-o-keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) ) @keyframes NAME-YOUR-ANIMATION ( 0% ( opacity: 0; ) 100% ( opacity: 1; ) )
#box ( -webkit-animation: NAME-YOUR-ANIMATION 5s infinite; /* Safari 4+ */ -moz-animation: NAME-YOUR-ANIMATION 5s infinite; /* Fx 5+ */ -o-animation: NAME-YOUR-ANIMATION 5s infinite; /* Opera 12+ */ animation: NAME-YOUR-ANIMATION 5s infinite; /* IE 10+, Fx 29+ */ )

Demi singkatnya, kod yang lain di halaman ini tidak akan menggunakan awalan, tetapi penggunaan dunia nyata harus menggunakan semua awalan vendor dari atas

Pelbagai langkah

@keyframes fontbulger ( 0% ( font-size: 10px; ) 30% ( font-size: 15px; ) 100% ( font-size: 12px; ) ) #box ( animation: fontbulger 2s infinite; )

Sekiranya animasi mempunyai sifat permulaan dan akhir yang sama, salah satu cara untuk melakukannya adalah dengan memisahkan nilai 0% dan 100% dengan koma:

@keyframes fontbulger ( 0%, 100% ( font-size: 10px; ) 50% ( font-size: 12px; ) )

Atau, anda selalu boleh memberitahu animasi berjalan dua kali (atau sebilangan kali) dan memberitahu arahnya alternate.

Memanggil animasi bingkai utama dengan sifat berasingan

.box ( animation-name: bounce; animation-duration: 4s; /* or: Xms */ animation-iteration-count: 10; animation-direction: alternate; /* or: normal */ animation-timing-function: ease-out; /* or: ease, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) */ animation-fill-mode: forwards; /* or: backwards, both, none */ animation-delay: 2s; /* or: Xms */ )

Shorthand Animasi

Hanya ruang-memisahkan semua nilai individu. Pesanan tidak menjadi masalah kecuali ketika menggunakan durasi dan kelewatan, pesanan harus mengikut pesanan itu. Dalam contoh di bawah 1s = tempoh, 2s = kelewatan, 3 = lelaran.

animation: test 1s 2s 3 alternate backwards

Gabungkan transformasi dan animasi

@keyframes infinite-spinning ( from ( transform: rotate(0deg); ) to ( transform: rotate(360deg); ) )

Pelbagai animasi

Anda boleh memisahkan nilai dengan koma untuk menyatakan pelbagai animasi pada pemilih.

.animate-this ( animation: first-animation 2s infinite, another-animation 1s; )

Langkah-langkah()

Fungsi langkah () mengawal dengan tepat berapa banyak bingkai utama yang akan diberikan dalam jangka waktu animasi. Katakan anda menyatakan:

@keyframes move ( from ( top: 0; left: 0; ) to ( top: 100px; left: 100px; ) )

Sekiranya anda menggunakan langkah (10) dalam animasi anda, ia akan memastikan hanya 10 bingkai utama yang berlaku dalam masa yang diperuntukkan.

.move ( animation: move 10s steps(10) infinite alternate; )

Matematik berjaya di sana. Setiap saat, elemen akan bergerak 10px ke kiri dan 10px ke bawah, hingga akhir animasi, dan sekali lagi terbalik selamanya.

Ini bagus untuk animasi spritesheet seperti demo ini oleh simurai.

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 *

Lebih Banyak Sumber

  • Dokumen MDN
  • MDN: Menggunakan Animasi CSS
  • Boleh Saya Gunakan - Sokongan Penyemak Imbas
  • VIDEO: Pengenalan Animasi CSS