Sintaks Animasi Keyframe - Trik CSS

Anonim

Deklarasi & Penggunaan Dasar

@-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, kode lainnya di halaman ini tidak akan menggunakan prefiks apa pun, tetapi penggunaan dunia nyata harus menggunakan semua prefiks vendor dari atas

Beberapa langkah

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

Jika animasi memiliki properti awal dan akhir yang sama, salah satu cara untuk melakukannya adalah dengan memisahkan koma nilai 0% dan 100%:

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

Atau, Anda selalu dapat memberi tahu animasi untuk berjalan dua kali (atau bahkan beberapa kali) dan memberi tahu arahnya alternate.

Memanggil animasi keyframe dengan properti terpisah

.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 */ )

Singkatan Animasi

Pisahkan saja semua nilai individu. Urutan tidak masalah kecuali saat menggunakan durasi dan penundaan, keduanya harus dalam urutan itu. Dalam contoh di bawah ini 1s = durasi, 2s = penundaan, 3 = iterasi.

animation: test 1s 2s 3 alternate backwards

Gabungkan transformasi dan animasi

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

Beberapa animasi

Anda dapat memisahkan koma nilai untuk mendeklarasikan beberapa animasi pada selektor.

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

Langkah()

Fungsi steps () mengontrol dengan tepat berapa banyak bingkai utama yang akan dirender dalam jangka waktu animasi. Katakanlah Anda menyatakan:

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

Jika Anda menggunakan langkah (10) dalam animasi Anda, ini akan memastikan hanya 10 bingkai utama yang terjadi dalam waktu yang ditentukan.

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

Matematika bekerja dengan baik di sana. Setiap satu detik, elemen akan bergerak 10px ke kiri dan 10px ke bawah, hingga akhir animasi, dan kemudian kembali secara terbalik selamanya.

Ini bagus untuk animasi spritesheet seperti demo oleh simurai ini.

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 *

Sumber Daya Lainnya

  • Dokumen MDN
  • MDN: Menggunakan Animasi CSS
  • Dapatkah Saya Menggunakan - Dukungan Browser
  • VIDEO: Pengantar Animasi CSS