Keyframe Animasi Sintaks
Deklarasi Dasar & Penggunaan
@-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;
-moz-animation: NAME-YOUR-ANIMATION 5s infinite;
-o-animation: NAME-YOUR-ANIMATION 5s infinite;
animation: NAME-YOUR-ANIMATION 5s infinite;
}
Demi singkatnya sisa kode pada halaman ini tidak akan menggunakan prefiks, tapi penggunaan dunia nyata harus menggunakan semua prefiks penjual 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 sama memulai dan mengakhiri properti, salah satu cara untuk melakukannya adalah untuk comma-separate the 0% and 100% values:
@keyframes fontbulger {
0%, 100% {
font-size: 10px;
}
50% {
font-size: 12px;
}
}
Atau, Anda selalu bisa mengatakan animasi untuk menjalankan dua kali (atau bahkan jumlah kali) dan memberitahu arah untuk
bergantian.
Memanggil animasi keyframe dengan sifat yang terpisah
.box {
animation-name: bounce;
animation-duration: 4s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-timing-function: ease-out;
animation-fill-mode: forwards;
animation-delay: 2s;
}
| timing-function |
ease, ease-out, ease-in, ease-in-out, linear, cubic-bezier(x1, y1, x2, y2) (e.g. cubic-bezier(0.5, 0.2, 0.3, 1.0)) |
| duration & delay |
Xs or Xms |
| duration-count |
X |
| fill-mode |
forwards, backwards, both, none |
| animation-direction |
normal, alternate |
Animasi Steno
Just-ruang terpisah semua nilai-nilai individu. Urutan tidak masalah kecuali ketika menggunakan kedua durasi dan delay, mereka harus dalam urutan itu. Dalam contoh di bawah 1s = durasi, 2s = delay, 3 = iterasi.
-webkit-animation: test 1s 2s 3 alternate backwards
Kombinasikan mengubah dan animasi
@keyframes infinite-spinning {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
Beberapa animasi
Anda bisa koma-memisahkan nilai untuk menyatakan beberapa animasi pada pemilih.
.animate-this {
animation:
first-animation 2s infinite,
another-animation 1s;
}
Langkah-langkah()
Langkah-langkah () fungsi kontrol persis berapa banyak keyframes akan membuat dalam jangka waktu animasi. Katakanlah Anda menyatakan:
@keyframes move {
from { top: 0; left: 0; }
to { top: 100px; left: 100px; }
}
Jika Anda menggunakan langkah-langkah (10) dalam Anda
animasi, itu akan memastikan hanya 10 keyframes 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, sampai akhir animasi, dan kemudian lagi secara terbalik selamanya.
Hal ini dapat menjadi besar untuk lembaran sprite animasi seperti
demo by simurai.
Dukungan Browser
Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+
