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 Resimler

HTML yorum etiketi ile öğe gizleme örneği

Eski tarayıcılarda kod gizleme ve kod satırını bölme Javascript

HTML5 Canvas Oyun Yapımı Dersleri

Linklerin Renklerini Değiştirme Örnek

YouTube Reklam Engelleyici

javascript ile aciklama satiri ve haftanın gunünü bulma

Uyurken Bile Para Kazanmak İster misin