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.
kaynak: http://www.webderslerim.com/ders/animate-css-kullanimi.html
Yorumlar
Yorum Gönder