CSS3 animation Özelliği

CSS3 animation özelliği

Css animation özelliği animasyon oluşturmak için kullanılır. Ve toplam sekiz adet özellik barındırabilir.Bunlar
  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-fill-mode
  • animation-play-state

Örnek:

Şimdi bir div kutusuna animation özelliği ile hareket kazandıralım.

div { animation: eren 7s infinite; -webkit-animation: eren 7s infinite; /* Chrome, Safari, Opera */ }

CSS3 animation nedir nasıl kullanılır

animation özelliği :8 diğer animasyon özelliklerini içinde barındırılabilen kısa yazım şeklidir.Bir animasyonu oluşturmak için bir adı olmalıdır .Yukarıdaki örnekte hareket edecek olan div kutusunun animasyon adı olarak "eren" adı verilmiştir ve animasyonunun 7 saniye süreceği , infinite değeri ile de sonsuz kez tekrarlanacağı belirtilmiştir.
CSS animation CSS animation özellikleri  
Varsayılan Değer: none 0 ease 0 1 normal none running  
Kalıtsallık: yok  
Animasyon Özelliği: yok  
Versiyon: CSS3  
JavaScript css animation: object.style.animation=" eren 7s infinite"

CSS3 animation Tarayıcı Desteği

CSS Kodu:
animation 43.0
4.0 -webkit-
Desteklemiyor 16.0
5.0 -moz-
9.0
4.0 -webkit-
30.0
15.0 -webkit-
12.0 -o-

CSS3 animation Değerleri

animation:name duration timing-function delay iteration-count direction fill-mode play-state;

CSS3 animation özelliği değerleri

CSS animation değerleri CSS animation değerleri tanımları
animation-name Animasyon için kullanılacak isimdir.
animation-duration Animasyonun süresini belirtmek için kullanılır.
animation-timing-function Animasyonun hız değişikliklerini tanımlamak için kullanılır. Hızlı mı başayacak ? yavaş mı bitecek ? gibi ..
animation-delay Animasyonda istenilen gecikme sürelerini ayarlamak için kullanılır.
animation-iteration-count Animasyonun tekrarlanma sayısı gibi özellikler kontrol edilebilir.
animation-direction Animasyonun yönüyle ilgli özellikler tanımlamımızı sağlar.
animation-fill-mode Animasyon bittiğindeki davranışını düzenler..
animation-play-state Animasyonun oynatılmasını yada durdurulması gibi işlevleri üstlenen bir özelliktir.
initial Varsayılan değerinin özelliklerini taşır.
inherit Soy bağından alacağı değerleri taşır.

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 overflow Özelliği

CSS justify-content Özelliği

CSS border-collapse Özelliği

HTML5 Canvas Oyun Yapımı Dersleri