Bu dersimizde css3 ile gelimiş animasyon yapmamızı sağlayan animation özelliğini işleyeceğiz.Daha önce hızlı ve kolay animasyon yapma fonksiyonu olan transitionu
http://ustaderslik.com/konu/CSS3_Animasyon_Yapımı_(Transition) burada anlatmıştım.
İncele : http://ustaderslik.com/ornek/animation.html
İndir : http://ustaderslik.com/dosya/animation.zip
Animation 2 kısımda oluşur.Biri animasyonu oluşturduğumuz keyframes bölümü,diğeri ise animasyonu atadığımız yer.Bu sistemde bir animasyonu her objeye atamamıza yarar.Bir nevi fonksiyon sistemine benzer.İlk önce animasyon oluşturma bölümünden başlayalım.
1-Animasyon Oluşturma
Animasyon oluşturmak için keyframes kullanırız.Keyframeste animasyon aşamalarını % ile belirliyoruz.
@keyframes ani_isim{
0%{ /*işlem*/ }
100%{ /*işlem*/ }
}
@keyframes ani_isim{
0%{ /*işlem*/ }
25%{ /*işlem*/ }
75%{ /*işlem*/ }
100%{ /*işlem*/ }
}
Temel kalıbı bu şekilde.Her animasyonumuza isim veriyoruz.Süslü parantezler içine bir veya birden çok özellik yazabiliriz.Örnek %0 da boyutu 100 yapıp %100 de 500 yaparsak boyutu atama işlemlerinde belirlediğimiz süre kadar %0 dan %100 aradaki farkı kapatarak ilerler.Tabi her css3 özelliği gibi bunuda tarayıcıya uyum kodlarını yazmalıyız.Örnek :
@keyframes ani_isim{ //normal
@-webkit-keyframes ani_isim{//chrome yandex safari
@-moz-keyframes ani_isim{//mozilla
@-o-keyframes ani_isim{//opera
@-ms-keyframes ani_isim{//ie
uyum kodlarını bu şekilde yazıyoruz.
2-Animasyon Atama
Animasyon atamak için öncelikle objemizi seçip animasyonumuzu atayıp özelliklerini belirliyoruz.Şimdi bu komutları inceleyelim.
animation-name : Oluşturduğumuz animasyonun ismini değer olarak veriyoruz.
animation-duration : Animasyonun ne kadar süreceğini belirtiyoruz.Örnek
1s,5s,10s gibi
animation-timing-function : Animasyon şekli.Yani hızlı başlayıp yavaş gitsin.Sürekli aynı hızda olsun gibi özellikleri belirlediğimiz yer.
http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp buradan tüm değerleri görebilirsiniz.
animation-delay : Animasyon başladan önce bekleme süresi.Yani sayfa yüklendikten 10 saniye sonra başla diyebiliriz.Bunun için değer olarak
1s,7s,10s... gibi değer gireriz.
animation-iteration-count: Normalde animasyon 1 kere oynar.Bu özelliği atayıp
3,5,10 gibi değerler vererek ne kadar oynayacağını belirleriz.Süresiz oynaması için
infinite değeri veririz.
animation-direction : Animasyon %100 gittiğinde %0 a geri dönmesini istiyorsak
alternate değeri vererek geri döndürebiliriz.
Komutlar bu kadar.Tabi bu kadar komut yazıp birde tarayıcı uyum kodları yazmak karışıklık yaratır.Bunun için yukardaki tüm komutları animation altında yazabiliriz.Örnek :
animation:ani_isim 1s linear 1s infinite alternate;
-webkit-animation:ani_isim 1s linear 1s infinite alternate;
gibi.Bu şekilde karmaşadan kaçarız.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Ustaderslik</title>
<style type="text/css">
.daire{width:50px;height:50px;background:#666;margin:auto;border-radius:300px;-webkit-border-radius:300px;-moz-border-radius:300px;
animation:ani_isim 1s linear 1s infinite alternate;
-webkit-animation:ani_isim 1s linear 1s infinite alternate;
-moz-animation:ani_isim 1s linear 1s infinite alternate;
-o-animation:ani_isim 1s linear 1s infinite alternate;
-ms-animation:ani_isim 1s linear 1s infinite alternate;
}
@keyframes ani_isim{
0%{width:50px;height:50px;}
50%{width:150px;height:150px;}
100%{width:300px;height:300px;}
}
@-webkit-keyframes ani_isim{
0%{width:50px;height:50px;}
50%{width:150px;height:150px;}
100%{width:300px;height:300px;}
}
@-moz-keyframes ani_isim{
0%{width:50px;height:50px;}
50%{width:150px;height:150px;}
100%{width:300px;height:300px;}
}
@-o-keyframes ani_isim{
0%{width:50px;height:50px;}
50%{width:150px;height:150px;}
100%{width:300px;height:300px;}
}
@-ms-keyframes ani_isim{
0%{width:50px;height:50px;}
50%{width:150px;height:150px;}
100%{width:300px;height:300px;}
}
</style>
</head>
<body>
<div class="daire"></div>
</body>
</html>
UstaDerslik
