CSS3 @keyframes aturan
contoh
Membuat elemen div secara bertahap bergerak 200 piksel:
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
Coba »
Di bagian bawah halaman ini untuk lebih banyak contoh.
Dukungan Browser
属性 | |||||
---|---|---|---|---|---|
@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- |
Tag definisi dan petunjuk
Gunakan @keyframes aturan, Anda dapat membuat animasi.
Membuat animasi secara bertahap mengubah pengaturan dari satu gaya CSS yang lain.
Selama animasi, Anda dapat mengubah gaya CSS terbenam.
Gunakan terjadi ketika perubahan yang ditentukan dalam%, atau kata kunci "dari" dan "untuk", dan ini adalah 0% sampai 100% identik.
0% adalah awal dari animasi, 100% ketika animasi selesai.
Untuk mendukung browser yang optimal, Anda harus selalu didefinisikan sebagai 0% dan 100% dari pemilih.
Catatan: Gunakan properti animasi untuk mengontrol penampilan animasi juga digunakan untuk memilih animasi mengikat..
tatabahasa
nilai | penjelasan |
---|---|
animationname | Diperlukan. Tentukan nama animasi. |
keyframes-pemilih | Diperlukan. Persentase durasi animasi. nilai hukum: 0-100% Catatan: Anda dapat menggunakan animasi keyframe-penyeleksi. |
css-gaya | Diperlukan. Satu atau lebih sah atribut gaya CSS |
contoh online
contoh
Banyak pemilih bingkai kunci untuk menambahkan film:
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px;}
25% {top:200px;}
50% {top:100px;}
75% {top:200px;}
100% {top:0px;}
}
Coba »
contoh
Mengubah banyak gaya CSS dalam satu animasi:
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
Coba »
contoh
Banyak pemilih keyframe dengan banyak gaya CSS:
{
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;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
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;}
}
Coba »
Artikel terkait
CSS3 Tutorial: CSS3 Animasi