CSS3 Animasyon Yapımı - Animation
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

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(2592)
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 2 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 2 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