CSS @keyframes Aturan
Contoh
Buat elemen bergerak secara bertahap 200px ke bawah:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Lebih banyak contoh "Coba Sendiri" di bawah ini.
Definisi dan Penggunaan
Aturan @keyframesmenentukan kode animasi.
Animasi dibuat dengan mengubah secara bertahap dari satu set gaya CSS ke yang lain.
Selama animasi, Anda dapat mengubah kumpulan gaya CSS berkali-kali.
Tentukan kapan perubahan gaya akan terjadi dalam persen, atau dengan kata kunci "dari" dan "ke", yang sama dengan 0% dan 100%. 0% adalah awal animasi, 100% adalah saat animasi selesai.
Tip: Untuk dukungan browser terbaik, Anda harus selalu menentukan pemilih 0% dan 100%.
Catatan: Gunakan properti animasi untuk mengontrol tampilan animasi, dan juga untuk mengikat animasi ke pemilih.
Catatan: Aturan !important diabaikan dalam keyframe (Lihat contoh terakhir di halaman ini).
Dukungan Peramban
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung aturan.
Angka yang diikuti oleh -webkit-, -moz- atau -o- menentukan versi pertama yang berfungsi dengan awalan.
| Property | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
Sintaks CSS
@keyframes animationname {keyframes-selector {css-styles;}}
Nilai properti
| Value | Description |
|---|---|
| animationname | Required. Defines the name of the animation. |
| keyframes-selector | Required. Percentage of the animation duration. Legal values: 0-100% Note: You can have many keyframes-selectors in one animation. |
| css-styles | Required. One or more legal CSS style properties |
Lebih Banyak Contoh
Contoh
Tambahkan banyak pemilih bingkai utama dalam satu animasi:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Contoh
Ubah banyak gaya CSS dalam satu animasi:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Contoh
Banyak pemilih keyframe dengan banyak gaya CSS:
@keyframes mymove
{
0% {top: 0px; left: 0px; background: red;}
25% {top: 0px; left: 100px; background: blue;}
50% {top: 100px; left: 100px; background: yellow;}
75% {top: 100px; left: 0px; background: green;}
100% {top: 0px; left: 0px; background: red;}
}
Contoh
Catatan: Aturan !important diabaikan dalam keyframe:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
Halaman Terkait
Tutorial CSS: Animasi CSS