Merhaba arkadaşlar, index yapan arkadaşlarımız için CSS3'ün nimetlerinden biri olan animasyonları anlatacağım.
Öncelikle bu animasyonlarla teker teker uğraşmamamız için, github'da classlar halinde tanımlanmış yapımız var.
https://daneden.github.io/animate.css/
adresinden ulaşabilirsiniz.
Dosyayı indirmek için
https://raw.github.com/daneden/animate.css/master/animate.css
Bu yapıyı kullanabilmek için öncelikle yapılması gereken
dosyayı indirip,
<head> tagları arasına eklememizdir.
Kod:
<link rel="stylesheet" href="animate.min.css">kodunu eklemektir.
Daha sonra oluşturacağımız nesnenin class'ına animasyon adımızı girerek nesnelerimizi hareket ettirebiliriz.
hangi animasyon, nasıl gözüküyor, yukarıdaki linkte vermiştim, buradada vereyim. https://daneden.github.io/animate.css/ adresinden, listeli halde olan animasyonları tek tek seçerek, nasıl bir görünüm oluşturuyor anlayabilirsiniz.
Örnek vermek gerekirse, h1 etiketimizde kullanalım:
Kod:
<h1 class="animated bounce">Ornek</h1>bu örnekte h1 nesnemiz, zıplayarak geliyor.
animasyonlarımız kullanılmadan önce başına animate getiriliyor. Sonra animasyonun adı yazılıyor.
Bu şekilde yaptığımız zaman nesnemiz bir defa animasyon halinde olur.
Fakat biz bunu sürekli yapmasını istiyorsak,
Kod:
<h1 class="animated infinite bounce">Ornek</h1>classımızda infinite özelliğini belirtmemiz yeterlidir.
Eğer yardıma ihtiyacınız olursa, yazabilirsiniz.
