CSS3 animation Özelliği
CSS3 animation özelliği
Cssanimation
ö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 birdiv
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. 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
Yorum Gönderme