Anasayfa CSS CSS3 Animasyonlar ( Animations ) CSS3 Animasyonlar ( Animations )
Ekim 30, 2014 10:15
Tarayıcı uyumluluğuna gelecek olursak CSS3 Animatons özelliği Mozilla’da uyumluluk kodu kullanmadan sorunsuz çalışmakta diğer tarayıcıların bazı sürümlerinde ise uyumluluk kodu kullanmamız gerekir.
Css3 Animations zamanları ve tanımları önceden yapılıp daha sonra uygulanılacak elemana belirtilir.Bir elemana istediğiniz kadar animasyon tanımlayabilirsiniz.Şimdi animation özelliklerine bir göz atalım.
Keyframes ( Anahtar Kareler )
Css ile animasyon yapımında “@keyframes ” kuralı kullanılmaktadır.Flash ve animasyon ile uğraşan kişilere yabancı gelmeyecek bir kavram olan keyframes başlangıç ve bitiş kareleri arasındaki durum ve hareketleri tanımlamamızı sağlar.
Not:” @ ” ( At rules ) Css deki kuralları tanımlayan bir karakterdir.Başka bir derste CSS’teki bu kuralları inceleyeceğiz.
Animasyon isimleri daha sonra elemanlara uygulanabilmesi için verilmektedir.”From” başlangıç karesidir.” from” içine yazılan her durum elemanın ilk halidir.”to” bitiş karesidir.Bu yapı iki anahtar karelidir.Ayrıca şu şekilde de yazılır.Bu yapı daha kullanışlıdır.
Her karede isteğimiz elemana hareket ya da durum verebiliyoruz.
Animation Name ( Animasyon Adı )
Keyframes ile tanımladığınız animasyonları elemana uygulamamızı sağlar.Animasyon ismi tek değer alır.
animation-name:shape; /* Birden fazla animasyon için isimleri virgül ile ayırmanız gerekir.   */
Not:Chrome,Opera vb.. tarayıcılar için uyumluluk kodu kullanmanız gerekir.(webkit,ms,o,moz)
Animation Duration ( Animasyon Süresi)
Animasyonun süresini belirtmemizi sağlar.Zaman değerleri alır.(s,ms)
Not:Bir animasyonun parametrelerinin çalışabilmesi için animasyon isminin ve süresinin elemana belirtilmesi gerekir.
Animation Timing Function ( Zamanlama Fonksiyonu )
Animation-timing-function geçiş efektleri vermemizi sağlayan güzel bir özelliktir.Aldığı değerler şunlardır.Animasyona estetiklik katar.
cubic-bezier(n,n,n,n) : Manuel olarak geçişleri kendimiz hazırlamamızı sağlar.
steps:Başlangıç karesinden yada bitişden itibaren belirtilen kare miktarı kadar atlamamızı sağlar.
Bu geçiş efektlerini aşağıdaki araçlar ile kolaylıkla hazırlayabilirsiniz.
Animation İteration Count ( Tekrar Sayısı )
Animasyonun kaç kez tekrarlanacağını belirtmemizi sağlar.2 Değer Alır.
Sayı:Tüm pozitif sayıları alabilir.Başlangıç değeri 1’dir.
İnfinite : Sonsuz anlamındadır.Animasyon devamlı tekrar eder.
Animation Direction ( Animasyonun Yönü )
Animasyonun yönünü belirtir.Normalde animasyon başlangıçtan bitişe kadar düz bir şekilde hareket eder.Bu hareketi tersine çevirmemiz bu özellik ile mümkün.Varsayılan(default) değer “normal ” olarak atanır.Aldığı değerler şunlardır;
normal:Animasyon her döngüde başlangıçtan sona ilerler.Her döngüde animasyon sıfırlanıp baştan sona hareket eder.
reverse:normal’in tersidir.Her döngüde animasyon geriye doğru hareket eder.
alternate:Animasyon sondan başa doğru hareket eder.Animasyon ters oynatılırken her zaman geri hareket eder.Alternate seçiminde geçiş efektleride tersine döner.Örneğin;”ease-in” ise bu “ease-out” şeklinde tanımlanır.
alternate-reverse:alternate’nin tersidir.Animasyon ilk döngüde sondan başa ikinci döngüde baştan sona hareket eder.
Animation Fill Mode ( Dolgu Mod )
Animation-fill-mode animasyon öncesi ve sonrası hedef stillerini belirtmemizi sağlar.Aşağıdaki değerleri alır.
none:Varsayılan değerdir.Animasyon öncesi veya sonrası herhangi bir stil uygulamaz.
forwards:Animasyonun son karesinde tanımlanan özellik korunur.Son karenin değerine bağlıdır.
backwards:Animasyonun ilk tanımlanan değerleri geçerli olup tanımlanan animation-delay zamanında uygulanan animasyonun ilk karenin değerine bağlıdır.
both:hem forwards hem de backwards geçerli olur.Hem animasyonun durdurma zamanındaki ilk değeri hemde son karedeki değerleri elemana tanımlanır.
Animation Delay ( Animasyona Ara Verme )
Animasyona başlamadan önce belli bir sürede bekletmemizi sağlar.Zaman değerleri alır.(ms,s)
Animation Play State (Animasyon Durdurma)
Genellikle belli bir olay ile yani tıklama ve üzerine mouse gelme durumunda başlatma ya da durdurma gibi olayları tanımlamamızı sağlar.
running( Çalıştır ):Animasyonu belli bir olay ile çalıştırır.
paused( durdur ):Animasyonu belli bir olay ile durdurur.
Animation özelliklerini tanımladık.Şimdi bu tanımları uzun uzun yazmaktansa daha kısa yazmak için animation özelliğinin kısayoluna bir bakalım.
Bu kısaltma sırasıyla şu şekile;animation-name,animation-duration,animation-timinig-function,animation-iteration-count,animation-delay,animation-fill-mode tek tanımla yapabilmekteyiz.
Şeklinde tanımladığımız animasyonu şu şekilde;
animation:shape 5s ease-in infinite alternate 2s forwards;
Daha kısa yazarak tek satıra düşürebiliriz.Eğer bir elemanda birden fazla animasyon tanıtmak istersek virgül ile ayırmamız gerekir.
animation:shape 5s ease-in infinite alternate 2s forwards,circle 2s ease-in-out 5 reverse 1s backwards;
Sonuç olarak Css3 animasyon özelliği herhangi bir flash programı ya da animasyon programı kullanmadan bize animasyon yapma imkanı veriyor.
Kodlarla uğraşmak istemeyen arkadaşlar için ise aşağıdaki animasyon editörlerini denemelerini tavsiye ederim.
Ayrıca Adobe Edge programı ile de animasyonlar hazırlayıp güzel çalışmalar elde edebilirsiniz.Yararlı olması dileğiyle.Kolay Gelsin…
animasyonlar css Css Animasyon css3 CSS3 Animasyonlar Css3 Animations PAYLAŞ
Tarih: 13 Kasım 2016 Saat: 03:37
Merhaba, animasyonun başlangıç zamanını ekranda görüntülenince yapmayı başaramadım. scroll a bağlı olsun istiyorum yani. Teşekkürler.