CSS @keyframes Kuralı
Örnek
Bir öğeyi kademeli olarak 200 piksel aşağı hareket ettirin:
@keyframes mymove
{
from {top: 0px;}
to {top: 200px;}
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Kural @keyframes
, animasyon kodunu belirtir.
Animasyon, bir CSS stili kümesinden diğerine kademeli olarak değiştirilerek oluşturulur.
Animasyon sırasında, CSS stilleri kümesini birçok kez değiştirebilirsiniz.
Stil değişikliğinin ne zaman gerçekleşeceğini yüzde olarak veya %0 ve %100 ile aynı olan "from" ve "to" anahtar sözcükleriyle belirtin. %0, animasyonun başlangıcı, %100 ise animasyonun tamamlandığı zamandır.
İpucu: En iyi tarayıcı desteği için her zaman hem %0 hem de %100 seçicileri tanımlamanız gerekir.
Not: Animasyonun görünümünü kontrol etmek ve ayrıca animasyonu seçicilere bağlamak için animasyon özelliklerini kullanın.
Not: Bir ana karede !important kuralı yoksayılır (Bu sayfadaki son örneğe bakın).
Tarayıcı Desteği
Tablodaki sayılar, kuralı tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit-, -moz- veya -o- ile takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
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- |
CSS Sözdizimi
@keyframes animationname {keyframes-selector {css-styles;}}
Mülk değerleri
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 |
Daha fazla örnek
Örnek
Tek bir animasyona birçok animasyon karesi seçici ekleyin:
@keyframes mymove
{
0% {top: 0px;}
25% {top: 200px;}
50% {top: 100px;}
75% {top: 200px;}
100% {top: 0px;}
}
Örnek
Tek bir animasyonda birçok CSS stilini değiştirin:
@keyframes mymove
{
0% {top: 0px; background: red; width: 100px;}
100% {top: 200px; background: yellow; width: 300px;}
}
Örnek
Birçok CSS stiline sahip birçok animasyon karesi seçicisi:
@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;}
}
Örnek
Not: Bir ana karede !important kuralı yoksayılır:
@keyframes myexample
{
from {top: 0px;}
50% {top: 100px !important;} /* ignored
*/
to {top: 200px;}
}
İlgili Sayfalar
CSS eğitimi: CSS Animasyonları