Animate.css  içerisinde 75 tane css ile hazırlanmış animasyon bulunduruyor. İşimizi hızlandırmak için kendimiz sıfırdan yazmak yerine bu css dosyasını kulllabiliriz.İlk olarak "animate.css" dosyasını indirelim ve sayfaya dahil edelim.

Animate css dosyasını indirmek için => https://daneden.github.io/animate.css/   sayfasından download animate.css diyerek dosyamızı indiriyoruz.

Ardından sayfamıza dahil ediyoruz. Head etiketinden önce ekliyoruz.

<link rel="stylesheet" type="text/css" href="animate.css">

(Eğer animate.css başka dizine attıysanız href="animate.css" yazan kısmı kendinize göre değiştirin)

Ardından animasyon uygulayacağımız nesneyi oluşturalım.

<div class="kutu">
	<span>
		Webderslerim.com
	</span>
</div>

Birde css ile kutu divimize biraz biçim verelim. 

<style>
		.kutu{background: #0799D1;color:#fff;font-weight: bold;border:2px solid #0980AE;font-family: Arial;padding: 10px;width:150px;height:80px; display: table;}
		.kutu>span{display: table-cell;vertical-align: middle;}
</style>

Bu şekilde basit bir kutu yaptık siz kendinize göre düzenlersiniz artık. Şimdi önemli kısıma geçelim. Animate.css kullanımı gayet basittir. Sadece animasyon uygulayacağımız nesneye class veriyoruz gerisini animate.css hallediyor. Şimdi bu oluşturduğumuz .kutu divine class verelim.

<div class="kutu animated flash">

 Dikkat etmemiz gereken nokta ilk önce animated classını ardından seçtiğimiz animasyonun ismini yazıyoruz.

Animasyonları görmek için => https://daneden.github.io/animate.css/ 

Bu adresten istediğiniz animasyonu seçip "Animate it" butonuna tıklayarak animasyonun çalışmasına bakabilirsiniz.Ben örnekte flash animasyonunu kullandım siz "flash" yazan yere seçtğiniz animasyonun ismini verebilirsiniz. Animate.css basit olarak böyle kullanılıyor. Eğer biraz daha gelişmiş bir şey yapmak istersek jquery ile birlikte kullanabiliyoruz. Bunun için ilk olarak jquery kütüphanemizi sayfamıza dahil edelim ve jquery kodlarını yazacağımız bölümü oluşturalım.

<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.1.min.js"></script>
<script type="text/javascript">
	$(function(){
		// Javascript kodları buraya yazılacak
	});
</script>

Şeklinde jquery kütüphanemizi sayfamıza dahil edip kodlarımız yazacağımız bölümü oluşturuyoruz.Siz isterseniz javascript dosyalarınızı başka bir dosyadan çekebilirsiniz.

Şimdi şöyle birşey yapalım butona tıklandığında kutu divine animasyon uyguluyalım.İlk önce bir tane buton oluşturuyoruz.

<button class="btn">Tıkla</button>

Şimdi jquery kısmına geçelim.

$("button.btn").click(function(){  // Class'ı btn olan button'a tıklayınca
	$(".kutu").addClass("animated bounceIn");  // kutu divine class ver
});

Kullanımı yine aynı sadece class veriyoruz animated kısmı sabit "bounceIn" yazdığımız kısmı kendimize göre düzenliyoruz.Bu şekilde yaptığımızda sadece birkez animasyon uygulayabiliyoruz. Bunu önlemek için Jquery .one() metodunu kullanabiliriz.

$(".kutu").addClass("animated slideInDown").one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
	$(".kutu").removeClass('animated slideInDown');
});

Bu yöntem sayesinde animasyon bittiğinde kutu divimize verdiğimiz classları kaldırabiliriz. İsterseniz tıklayınca(click) çalışmasını sağlamak yerine üzerine gelince çalışmasınıda sağlayabilirsiniz. Bunun için click yerine hover kullanmalısınız size kalmış artık.

Eğer yapamadığınız bir yer olursa yorum yaparak belirtmeniz yeterli yardım etmeye çalışırım.

Daha fazla bilgi için => https://github.com/daneden/animate.css

Kolay gelsin ...