CSS keyframes Özelliği

CSS keyframes

css @keyframes özelliği ile animasyon kuralları oluşturulabilir.

Örnek:

Bu örnekte bir div elemanı oluşturulan @keyframes kurallarına göre hareket edecektir.

div { width: 125px; height: 125px; background: yellow; position: relative; -webkit-animation: animasyondivi 4s infinite; animation: animasyondivi 4s infinite; } @keyframes animasyondivi { 0% { top: 0px; } 25% { top: 150px; } 75% { top: 50px } 100% { top: 200px; } }

CSS keyframes nedir nasıl kullanılır

Animasyonları oluştururken kare kare css animasyon kuralları oluşturulur.
"from" and "to" ve %0 ve %100 ayni anlamdadır.
Detaylı öğrenmek için anasayfadaki animasyon örneklerini inceleyiniz.

CSS keyframes Tarayıcı Desteği

Tablodaki sayılar özelliği ilk destekleyen tarayıcı sürümleridir.

CSS Kodu:
@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 keyframes Değerleri

@keyframes animationname {
  keyframes-selector {
    css-komutları;
  }
}

CSS @keyframes özelliği değerleri

CSS @keyframes değerleri CSS @keyframes değerleri tanımları
animasyon ismi Animasyon için isim oluşturulur.
keyframes-seçicisi Gerekli Animasyon süresi yüzdesidir. 0-100 % gibi.
css-styles Kullanılacak CSS stil özellikleri

Yorumlar

Bu blogdaki popüler yayınlar

HTML progress Etiketi

CSS content Özelliği

HTML section Etiketi

CSS transition-delay Özelliği

CSS align-items özelliği

CSS text-justify Özelliği

CSS border-collapse Özelliği

CSS overflow Özelliği

CSS justify-content Özelliği

HTML5 Canvas Oyun Yapımı Dersleri