CSS3 Animation Özellikleri

CSS3 animation özelliği ile animasyon yapımı hakkında sizlere elimden geldiğince bir yazı yazmaya çalışacağım;

Öncesinde bilmeniz gereken şey css3 animation özelliğini kullanırken ilk olarak bir animasyon tanımlarsınız ve sonrasında ise bu animasyonun uygulanmasını istediğiniz elemana bu animasyonu eklersiniz. Yani önce harç karıştırılır sonra binaya bu harç dökülür misali. CSS3 ile gelen animation özelliği flash / javascript olmaksızın animasyon yapma fırsatı tanır. Tarayıcı desteği ise malumunuz aklınıza gelen o illet tarayıcı hariç diğerlerinde sorunsuz olarak çalışmaktadır bu meret.

İlk olarak öğreneceğimiz şey ; daha önceden Flash kullanmış olanlarınız bilirler…keyframe yani anahtar kare olayı. Anahtar kare animasyonun başlangıcını, değişimini ve bitişini belirleyen noktalardır. Örneğin animasyon başladığında şu olsun animasyon bittiğinde de bu olsun diyebiliyoruz. Burada önemli olan değişikliğin olmasını istediğimiz her şey için ayrı ayrı keyframe tanımlamak durumundayız. (bu hep böyleydi maalesef css’ ten bile önce böyleydi bu nabak) CSS3′ te keyframe kullanırken @keyframes ile başlar ve animasyonun ismi ile devam eder süslü parantezlerimizi açarız. bu parantezler içerisine de normal bir şekilde css kodlarımızı yazarız.

@keyframes animasyonun_adi_buraya_gelecek {

keyframe {

ozellik : deger;

}

}

Bunu bir örnek üzerinde göstermeye çalışalım;

/*chrome için*/
@-webkit-keyframes animasyonumuzun_adi { 
from {
 margin-right:100%;
 width:0%
}

to {
 margin-right:0%;
 width:100%;
}
}

/*mozilla için*/
@keyframes animasyonumuzun_adi {
from {
 margin-right:100%;
 width:0%
}

to {
 margin-right:0%;
 width:100%;
}
}

Yukarıdaki bu animasyonda toplagel adlı animasyona 3 adet keyframe ekledik

  • 0% yani animasyona başlamadan önceki hali sağ’da 0’dır
  • 50% yani animasyonun tam olarak yarısındaki hali sağdan 100px ileridedir.
  • 100% ise animasyonun bitimindeki hali sağdan 200px ileridedir.

yukarıdaki kod dizelerinde belirtilmiştir.

Anahtar kareleri belirledikten sonra şimdi sırada animasyonun özelliklerini tanımlamaya geldi. Neler yani ; bu animasyon kaç saniye sürecek, gelişi gidişi nasıl olacak, animasyonun periyodu, tekrar edecek mi vs. gibi özellikler bunlar. Korkma hele yaklaş daha yeni başladık. CSS 3 Animation özelliğinin özelliklerini sırasıyla yazalım:

  • animation-name
  • animation-duration
  • animation-timing-function
  • animation-iteration-count
  • animation-direction
  • animation-delay
  • animation-play-state
  • animation-fill-mode

animation-name

bir elemana animasyon uygulayacağımız zaman ilk olarak isim ile onu tanımlamamız lazım gerekir. anahtar kare’ ye animasyon adı olarak eklenir.

animation-duration

animasyonun ne kadar süreceğini belirttiğimiz özelliktir.

animation-timing-function

animasyonun hangi fonksiyon ile hareketini gerçekleştireceğini belirttiğimiz yerdir burası. varsayılan olarak ease değerini alır, cubic linear vs. gibi değerler koyabiliriz.

animation-iteration-count

animasyonun kaç kere tekrar edeceğini burada belirtiyoruz.

animation-direction

animasyonu bazen tersten görmek isteyebiliriz (İstiklal Marşı’ nı tersten okumak istemek gibi bir şey değil) burada animation direction kullanabiliriz. normal, reverse, alternate ve alternate-reverse olmak üzere 4 değer alır.

animation-delay

animasyona gecikme eklemek istediğimizde kullanırız. saniye cinsinden belirlenir.

animation-play-state

bu ise animasyonun hareket edip etmediğini kontrol etmemize yarar, eğer animasyon devam ediyorsa durdurabiliriz.

animation-fill-mode

animasyon bittiğinde başa mı dönsün yoksa en son halinde mi kalsın istersiniz ? işte bu bu işe yarar efendim.

Örnek kullanımlar

  animation-name: animasyon_adi;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-delay: 5s;
  animation-fill-mode: forwards;

You may also like...

2 Responses

  1. 7 Temmuz 2016

    […] dediğiniz şeyler için @media elementinin kullanımı yeterli olacaktır. Daha önce css ile animasyon oluşturma konulu yazımda @media elementini […]

  2. 1 Aralık 2019

    […] dediğiniz şeyler için @media elementinin kullanımı yeterli olacaktır. Daha önce css ile animasyon oluşturma konulu yazımda @media elementini […]

Bir cevap yazın