CSS3 Animasyon Yapımı - Animation
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS3 Animasyon Yapımı - Animation

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(9435)
RAPOR ET
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>




davmaneydi
davmaneydi 10 Yıl Önce Cevaplandı
Hocam örnekte daire büyüyüp küçülüyor ama yukardan nasıl merkezden büyüyüp küçülmesini sağlarız.
cArleone
cArleone 10 Yıl Önce Cevaplandı
ojeyi büyütürken aynı anda objeyi yukarı harekte etdirirsen tam merkezden büyüme havası verirsin.örneğin obje height 50px diyelim.animasyon %100 olduğunda 100px olsun.tam ortalılklı olması için objenin %100 de objeyi 50 px yukarı kaldırman gerek.yani yüksekliğin yarısı kadar.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol