Css Animation Kullanımı

Merhaba Arkadaşlar,
Bu makalede Css’te animation özelliği nedir, nasıl kullanabiliriz onu öğreneceğiz.Animation özelliği ile bir html etiketi üzerinde javascript veya flash kullanmadan animasyon işlemlerini gerçekleştirebiliriz.Animasyon için gerekli css kodlarını @keyframes özelliği içerisine yazıyoruz.Bunu 2 farklı yol ile yapabiliriz:

a – @keyframes özelliği içerisindeki from ve to  içerisine kodlarımızı yazabiliriz.Animasyon, belirtilen sürede from içerisindeki css kodlarından başlar ve kademeli olarak to içerisindeki css kodlarına dönüşünceye kadar devam eder.Burda @keyframes özelliğinden hemen sonra dilediğimiz bir animasyon ismi vermemiz gerekiyor.Kullanımı şu şekilde,

b – @keyframes özelliği içerisinde, animasyonun belirtmiş olduğumuz yüzde değerlerine göre kademeli olarak uygulanmasını sağlayabiliriz.Yine @keyframes özelliğinden hemen sonra dilediğimiz bir animasyon ismi vermemiz gerekiyor.Kullanımı şu şekilde,

Animasyonumuz için gerekli css kodlarını bu şekilde yazdıktan sonra şimdi de bir html etiketi üzerinde bu animasyonu nasıl uygulayabileceğimize bakalım.

1 – animation-name : Animasyonun hangi etikete uygulanmasını istiyorsak, o etikete animation-name özelliği ile yazmış olduğumuz animasyonun adı verilir.Örneğin yukarda @keyframes ile yazmış olduğumuz bir animasyon olsun.Bunu bir div etiketine uygulamak istiyorsak,

şeklinde yazmamız gerekiyor.

2 – animation-duration : Animasyonun ne kadar sürede tamamlanacağını belirtir.Varsayılan değeri 0’dır.Örneğin animasyonun 3 saniye sürmesini istiyorsak,

şeklinde yazmamız gerekiyor.

3 – animation-delay : Animasyonun belirteceğimiz süre kadar geç başlamasını sağlayabiliriz.Örneğin animasyonun 2 saniye geç başlamasını istiyorsak,

şeklinde yazmamız gerekiyor.

Şimdi buraya kadar öğrendiklerimizle basit bir animasyon örneği yapalım.Hover olayı ile div’in üzerine gelindiğinde animasyonun başlamasını sağlayalım.

     ► Birinci div’de keyframes’in ilk kullanımını görelim.

     ► İkinci div’de keyframes’in ikinci kullanımını görelim.

     ► Üçüncü div’de ise animation delay özelliği ile animasyonu 2 saniye geç başlatalım.

4 – animation-iteration-count : Bu özellik ile animasyonun kaç defa tekrar edeceğini belirtebiliriz.Örneğin animasyonun 3 defa tekrar etmesini istiyorsak,

şeklinde yazmamız gerekiyor.Eğer animasyonun sonsuz döngüye girmesini yani sürekli tekrar etmesini istiyorsak infinite değerini vermemiz gerekiyor.

Bir <div> oluşturalım ve infinite değeri ile animasyonun sürekli devam etmesini sağlayalım.

5 – animation-direction : Animasyonun yönünü belirlememizi sağlar.Dört değer alabilir.Bunlar,

     ► normal : Varsayılan değerdir.

     ► reverse : Animasyonun ters yönde çalışmasını sağlar.

     ► alternate : Animasyonun önce normal sonra tam tersi yönde çalışmasını sağlar ve bu şekilde devam eder.

     ► alternate-reverse : Animasyonun önce ters yönde sonra normal yönde çalışmasını sağlar ve bu şekilde devam eder.

Şimdi bir <div> etiketi tanımlayalım ve animation-direction özelliğine 3 farklı değeri vererek aralarındaki farkı uygulamalı olarak görelim.

animation-direction : reverse

animation-direction : alternate

animation-direction : alternate-reverse

6 – animation-timing-function : Animasyon gerçekleşirken bunu farkı şekillerde yapabiliyoruz.Örneğin 5 saniyede gerçekleşeceğini düşünelim.Gerçekleşecek animasyon, hızlı bir şekilde başlayıp sonlara doğru yavaşlayabilir.Yavaş bir şekilde başlayıp sonlara doğru hızlanabilir veya sabit bir hızda gerçekleşebilir.İşte bu gibi seçenekleri belirlemek için animation-timing-function özelliğini kullanıyoruz.Değer olarak şunları alabilir,

     ► ease : Animasyon, yavaş başlar sonra hızlanır en son tekrar yavaşlar. (Varsayılan değerdir.)

     ► linear : Animasyon, baştan sona aynı hızda devam eder.

     ► ease-in : Animasyonun yavaş başlamasını sağlar.

     ► ease-out : Animasyonun yavaş bitmesini sağlar.

     ► ease-in-out : Animasyon, yavaş başlar ve yavaş biter.

7 – animation-fill-mode : Animasyonun bittikten sonraki durumu belirlememizi sağlar.Değer olarak şunları alabilir,

     ► none : Animasyon bittikten sonra başlangıç değerlerine döner. (Varsayılan değerdir.)

     ► forwards : Animasyon bittikten sonraki son durumunda kalır ve o son durumdaki değerler uygulanır.

     ► backwards : Animasyon bittikten sonra veya durdurulduğunda, başlangıç özellikleri uygulanır.

     ► both : forwards ve backwards değerleri birlikte uygulanır.

8 – animation-play-state : Bu özellik ile animasyonları durdurabiliriz.İki değer alabilir.Bunlar,

     ► running : Varsayılan değerdir ve animasyon normal bir şekilde çalışır.

     ► paused : Animasyonu durdurmamızı sağlar.

Şimdi bir <div> etiketi tanımlayalım ve üzerine geldiğimizde animation-play-state özelliği ile animasyonu durduralım.

Öğrendiğimiz bu özellikleri, animation özelliği ile birlikte kullanabiliriz.Kullanımı şu şekilde,

Tarayıcı Desteği

ÖzellikChromeIEFirefoxSafariOpera
@keyframes

43.0

4.0 -webkit-

10.0

16.0

5.0 -moz-

9.0

4.0 -webkit-

30.0

15.0 -webkit-

12.0 -o-

animation

43.0

4.0 -webkit-

10.0

16.0

5.0 -moz-

9.0

4.0 -webkit-

30.0

15.0 -webkit-

12.0 -o-

Bu resimde tarayıcıların animation ve @keyframes özelliklerini hangi versiyon ile birlikte sorunsuz desteklemeye başladığını ve özelliklerin ön ekler ile birlikte kullanıldığında, hangi versiyondan itibaren sorunsuz çalıştığını görebilirsiniz.

Tarayıcı uyumluluğu ile ilgili daha kapsamlı ve güncel bilgi almak isterseniz caniuse sitesini ziyaret edebilirsiniz.

Dikkat : Bu özellikleri eski tarayıcılarda da sorunsuz bir şekilde kullanmak istiyorsanız, ön eklerle birlikte kullanmalısınız.Örneğin,

Yeni bir makalede görüşmek üzere.

Önceki : Css Dersleri 25 – Transform Kullanımı

Sonraki : Css Dersleri 27 – Column Kullanımı

Leave a Reply

TASARIMLARINIZDA KULLANABİLECEĞİNİZ TAM 150 FARKLI RENK PALETİRenkleri Göster
+ +