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

Popüler yayınlar

CSS content Özelliği

CSS justify-content Özelliği

Javascript ile neler yapılabilir

CSS top Özelliği

HTML strong Etiketi

Kriptopara nasıl alınır ve nereden alınır?

Ücretsiz Bitcoin Kazan Pasif Gelir Elde Et İnternetten Para Kazan

Javascript Oyun Yapma Dersleri HTML5+CSS3

CSS flex-basis Özelliği

HTML5 Canvas Oyun Yapımı Dersleri