CSS3 Animations  özelliği  herhangi bir flash programı yada javascript kullanmadan bize animasyon yapmamızı sağlar.Animasyondaki kareler,hareketler vb. özellikleri CSS ile atamanız mümkün.Sayfadaki ” “yükleniyor.. ” simgeleri  SWF  ve GIF  olarak sayfaya import ediliyordu ancak Css3 ile gelen animation özelliği tasarımcılara kolaylık sağlamış oluyor ve yüksek boyutlu SWF ve GIF lere gerek kalmadan fonksiyonel animasyonlar yapmış oluyoruz.

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.

asdsa

 

Kaynak:http://caniuse.com/#search=css3%20animation

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.

HTML

<div class="Content"></div>

CSS

@keyframes  shape{
    from{}
    to{}
}
.Content{}

11111Animasyon 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.

@keyframes shape{
     0%{}
    50%{}
    100%{}
}

Her karede isteğimiz elemana hareket ya da durum verebiliyoruz.

 Animations Özellikleri

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

Animation Name ( Animasyon Adı )

Keyframes ile tanımladığınız animasyonları elemana uygulamamızı sağlar.Animasyon ismi tek değer alır.

@keyframes shape{
0%{margin-left:0}
100%{margin-left:250px}
}
.Content{
width:150px;
height:150px;
background:C42D2D;
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)

@keyframes shape{
0%{margin-left:0}
100%{margin-left:250px}
}
.Content{
width:150px;
height:150px;
background:#C42D2D;
animation-name:shape;
animation-duration:5s;
}

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.

  • linear
  • ease
  • ease-in
  • ease-out
  • ease-in-out
  • 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.
.Content{
animation-name:shape;
animation-duration:5s;
animation-timing-function:ease-in
}

Bu geçiş efektlerini aşağıdaki araçlar ile kolaylıkla hazırlayabilirsiniz.

  1. http://matthewlein.com/ceaser/
  2. http://cubic-bezier.com
  3. http://easings.net/
  4. http://jeremyckahn.github.io/stylie/
  5. http://coveloping.com/tools/css-animation-generator

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.
.Content{
animation-name:shape;
animation-duration:5s;
animation-timing-function:ease-in;
animation-iteration-count:infinite
}

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.
</pre>
<pre>.Content{
animation-name:shape;
animation-duration:5s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
animation-direction:alternate
}</pre>
<pre>

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.
</pre>
<pre>.Content{
animation-name:shape;
animation-duration:5s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-fill-mode:forwards
}</pre>
<pre>

Animation Delay ( Animasyona Ara Verme )

Animasyona başlamadan önce belli bir sürede bekletmemizi sağlar.Zaman değerleri alır.(ms,s)

</pre>
<pre>.Content{
animation-name:shape;
animation-duration:5s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-fill-mode:forwards;
animation-delay:2s;
}</pre>
<pre>

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.
</pre>
<pre>.Content{
animation-name:shape;
animation-duration:5s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-fill-mode:forwards;
animation-delay:2s;
}</pre>
<pre>.Content:hover{
animation-play-state:paused;
}</pre>
<pre>

Javascript ve Jquery ile daha güzel ve fonksiyonel çalışmalar yapılabilir.Çünkü Css’de durum seçicileri yeterli düzeyde değildir.

Animation Kısayolu

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.

Örneğin;

<pre>.Content{
animation-name:shape;
animation-duration:5s;
animation-timing-function:ease-in;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-delay:2s;
animation-fill-mode:forwards;
}</pre>

Şeklinde tanımladığımız animasyonu şu şekilde;

.Content{
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…

 

Facebook'dan yorumla