CSS3 – Animation Özellikleri

Bu dersimde sizlere css3 ile birlikte gelen animation özelliği ve türevlerini göstereceğim.. Yararlı olması dileğiyle..

@keyframes

Animasyon işlemleri için öncelikle css’de bir keyframes oluşturulur.. Bu özelliğin içine animasyon kuralları yazılır.. Örneğin şu renkten, şu renge geçsin gibi.. Ya da başlangıçta şu, yarısına geldiğinde şu, bittiğinde şu şekli alsın gibi kurallar belirtilir.

İsterseniz ilk keyframes örneğimizi yapalım.. Bu örnek bir renk geçişi olsun.. Örneğin sarı renkten yeşil renge geçsin.

@keyframes ilkDeneme {
	from { background: yellow }
	to { background: green }
}

/* Firefox */
@-moz-keyframes ilkDeneme {
	from { background: yellow }
	to { background: green }
}

/* Safari ve Chrome */
@-webkit-keyframes ilkDeneme {
	from { background: yellow }
	to { background: green }
}

/* Opera */
@-o-keyframes ilkDeneme {
	from { background: yellow }
	to { background: green }
}

Evet, desteklenen tüm tarayıcılara uygun ilkDeneme adında bir keyframes oluşturduk.. Ancak bu haliyle bir işe yaramıyor ne yazık ki.. Peki ne yapacağız?

Animation Özellikleri

Animasyon işleminde kullanılan birden fazla özellik mevcut.. Sırasıyla aşağıda bunları inceleyelim..

animation-name:
Keyframes ismini bu özellikte belirtiyoruz.. Böylece hangi animasyonu çağıracağımızı söylüyoruz.

animation-duration:
Animasyonun oluş süresini bu özellikte belirtiyoruz.. Örneğin 2s dersek animasyon 2 saniyede olup bitecek anlamına geliyor.

animation-timing-function:
Animasyonun hızını belirlemek için kullanacağımız özelliktir.. Standart olarak “ease” değeri vardır.. Alabileceği diğer değerler ise şu şekilde;
( linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n), steps(n) )
(Örnek: http://www.roblaplaca.com/examples/bezierBuilder/)

animation-delay:
Animasyonun gecikme hızı bu özellikte belirlenir.. Örneğin “2s” dediğimizde 2 saniye sonra animasyon başlar.

animation-iteration-count:
Animasyonun kaç kez tekrarlanacağını bu özellik ile belirliyoruz.. Örneğin 2 dediğimizde, animasyon 2 kez kendini tekrar edip duracaktır. Ya da infinitedersek sonsuza dek kendini tekrar edecektir.

animation-direction:
Animasyon yönünü ayarlamamızı sağlar. Bir tek değer alıyor oda “alternate“.. Bu değer uygulandığında animasyon bittiğinde tam tersine tekrar başlatır.
(Ekstra: https://developer.mozilla.org/en-US/docs/CSS/animation-direction)

animation-play-state:
Animasyonun çalışacağını ya da duracağını bu özellik ile belirliyoruz.. Sabit değeri “running“dir.. Yani animasyon çalışsın şeklindedir. Alabileceği diğer değer ise “paused” olup animasyonun çalışmasını durdurur.

animation:
Yukarıdaki tüm animasyon özelliklerini tek seferde tanımlamak için bu özelliği kullanabiliriz.. Tanım sırası şu şekildedir;
( animation: name duration timing-function delay iteration-count direction )

Çoklu Animasyon

Birden fazla animasyonuda virgül ile ayırarak atıyabilirsiniz.. Örnğein;

@keyframes animasyon_1 {
    from { left: 0 }
    to { left: 300px }
}
@keyframes animasyon_2 {
    from { transform: rotate(0deg) }
    to { transform: rotate(360deg) }
}

.box {
     animation: animasyon_1 2s infinite,
                animasyon_2 1s infinite
}