Css3 Animation Özellikleri

http://www.erbilen.net/demo/css3_animation/index.html

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 infinite dersek 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
}

Ders Demosu

Derste hazırladığımız demoyu aşağıdan inceleyebilirsiniz.. Gerçi ben azıcık değiştirdim 🙂 Derste sadece belli şeyleri anlatmışım, birkaç css özelliği daha ekledim demoda.
Demo: http://www.erbilen.net/demo/css3_animation/index.html
Döküman: http://www.erbilen.net/demo/css3_animation/css3_animation.html

Kaynak Dosyalar

www.erbilen.net/uploads/1363967012_css3_animation.rar

Yayınlayan

Tayfun Erbilen

2009’dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“Css3 Animation Özellikleri” üzerine 14 yorum

  1. prototurk e birileri mi saldırıyor? saldırıyorsa bu grubun adı belli mi?

  2. @Abdullah Şahin, takılmayalım bunlara. Benim sorunum bunlar, sizin değil 🙂

  3. javascript tarihe mi karışacak gerçekten ?
    Onun yerine CSS3 ve HTML5 mi kullanacağız ?
    CSS genel olarak parametreli bir yapısı var ama javascript daha bir özgür yapısı var ama;
    protourk.com ve uzmancevap.org bizim içinde sorun siteye giremiyoruz 😉

  4. Ders için Teşekkürler. Her şey aydın anlatılmış. (not: İndirme linki çalışmıyor)

  5. @Qalib Abbasov, teşekkürler indirme linkini düzenledim.
    @aliveli, sanırım bunu zaman gösterecek.

  6. Allah razı olsun, hakkında ödenmez. İnşallah şu prototürk ve uzmancevap'a yapılan saldırılar da durur en kısa zamanda. İnsanları anlamak güç sana faydalı olan bir şeyi neden zarar veriyorsun ki?

  7. noktası virgülüne kadar herşeyi aynı yaptım olmadı. wamp'ta çalıştırmayı deniyorum olmuyor. tarayıcı güncel chrome. delirecem.

    ayrıca bir de bu jquery kodlarını internet olmadan çalıştırmak mümkün değil mi?

  8. @Erhan ERCENGİZ, kaynak dosyaları indirip hatanıza bakabilirsiniz. Ve çalıştırmanız mümkün.. jQuery kütüphanesini bilgisayarınıza indirdikten sonra internet ile bir işiniz yok jquery kodlarında.

  9. emegine sağlık kardeşim, emeklerin sayesinde ögrendim bu konuyu, bütün içtenligimle teşekkür ederim

  10. hocam merhaba dün geceden beri uğraşıyorum dersleri de takip ettim ancak sorunuma çare bulamadım..tek sayfadan oluşan ve aşağı doru uzanan bir web sitesinde <a href="#aaa"> şeklinde anchor'a aaa id'sine sahip div'i adres gösterdim…bunun gibi 4-5 tane daha div var ve anchor'la bağladım divlere doğru sayfayı kaydırıyorum…buraya kadar bir sıkıntı yok..yapmaya çalıştığım şey ise sayfanın kayma hızını ayarlamak…yani birden pat diye ışınlanmasın da kaydırma çubuğu yavaşça kaysın…sonuç olarak fatih Hilmioğlu hocanın notlarını da inceledim sizin derslerinize de baktım baya uğraştım bir türlü işin içinden çıkamadım…eğer basit birşeyse yardımcı olurmusunuz??

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir