Contoh
Membuat elemen bergerak secara bertahap 200px bawah:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Cobalah sendiri " Lebih "Try it Yourself" contoh di bawah ini.
Definisi dan Penggunaan
The @keyframes aturan menentukan kode animasi.
animasi dibuat secara bertahap berubah dari satu set gaya CSS yang lain.
Selama animasi, Anda dapat mengubah set gaya CSS berkali-kali.
Menentukan kapan perubahan gaya akan terjadi dalam persen, atau dengan kata kunci "from" dan "to" , yang sama dengan 0% dan 100%. 0% adalah awal dari animasi, 100% adalah ketika animasi selesai.
Tip: Untuk mendukung browser terbaik, Anda harus selalu menentukan baik 0% dan 100% pemilih.
Note: Gunakan sifat animasi untuk mengontrol penampilan animasi, dan juga untuk mengikat animasi untuk pemilih.
Dukungan Browser
Angka-angka dalam tabel menentukan versi browser pertama yang mendukung penuh aturan.
Nomor diikuti oleh -webkit-, moz atau -o- menentukan versi pertama yang bekerja dengan awalan.
| Milik | |||||
|---|---|---|---|---|---|
| @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- |
CSS Syntax
@keyframesanimationname {keyframes-selector {css-styles;}}Nilai properti
| Nilai | Deskripsi |
|---|---|
| animationname | Wajib. Mendefinisikan nama animasi. |
| keyframes-selector | Wajib. Persentase durasi animasi. nilai hukum: 0-100% Note: Anda dapat memiliki banyak keyframes-pemilih dalam satu animasi. |
| css-styles | Wajib. Satu atau lebih sifat gaya CSS hukum |
Contoh lebih
Contoh
Tambahkan banyak pemilih keyframe dalam satu animasi:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Cobalah sendiri " Contoh
Mengubah banyak gaya CSS dalam satu animasi:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
/* Standard syntax */
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Cobalah sendiri " Contoh
Banyak pemilih keyframe dengan banyak gaya CSS:
/* Chrome, Safari, Opera */
@-webkit-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;}
}
/* Standard syntax */
@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;}
}
Cobalah sendiri " Pages terkait
CSS3 tutorial: CSS3 Animasi