Örnek
Bir öğe kademeli olarak 200px aşağı hareket yapın:
/* Chrome, Safari, Opera */
@-webkit-keyframes mymove {
from {top: 0px;}
to {top: 200px;}
}
/* Standard syntax */
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
@keyframes kural animasyon kodunu belirtir.
animasyon giderek birbirine CSS stilleri biri kümesinden değiştirerek oluşturulur.
animasyon sırasında, CSS stilleri birçok kez kümesini değiştirebilir.
Stil değişikliği yüzde veya anahtar kelimelere ne zaman olacağına dair belirtme "from" ve "to" 0 ve% 100,% aynı olan,. Animasyon tamamlandığında% 0 animasyon başlangıcı olup,% 100.
İpucu: en iyi tarayıcı desteği için, her zaman% 0 ve% 100 seçicileri hem tanımlamalıdır.
Note: Seçicilere animasyon bağlamak da animasyonun görünümünü kontrol etmek animasyon özelliklerini kullanın ve.
Tarayıcı Desteği
Tablodaki rakamlar tamamen kuralı destekleyen ilk tarayıcı sürümü belirtir.
Sayılar -webkit-, -moz- ardından veya önek ile çalıştı ilk sürümü belirtmek -O-.
| özellik | |||||
|---|---|---|---|---|---|
| @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 sözdizimi
@keyframes Mülkiyet Değerler değer Açıklama animationname Gereklidir. Animasyonun adını tanımlar. keyframes-selector Gereklidir. animasyon süresinin yüzdesi. Geçerli değerler:
% 0-100
dan (same as 0%)
için (same as 100%)
Note: tek bir animasyon birçok ana kareler-seçicileri sahip olabilir.
css-styles Gereklidir. Bir veya daha fazla yasal CSS stil özellikleri
Diğer Örnekler
Örnek
bir animasyon birçok anahtar kare seçiciler ekleyin:
/* 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;}
}
Kendin dene "
Örnek
bir animasyon birçok CSS stillerini değiştirin:
/* 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;}
}
Kendin dene "
Örnek
Birçok CSS stilleri olan birçok anahtar kare seçiciler:
/* 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;}
}
Kendin dene "
İlgili Sayfalar
CSS3 öğretici: CSS3 Animasyonlar