Animate.css

Merhaba, bugün size benimde yeni tanışmış olduğum Animate.css‘den bahsedeceğim. Animate.css içinde birçok animasyonun bulunduğu bir CSS3 kütüphanesidir. İçinde 75 adet animasyon ile gelen bu müthiş kütüphane animasyon severlerin çok işine yarayacağına eminim.

Kurulum

Animate.css Bower yada Npm ile kurulabilir.

Bower

bower install animate.css –save

Npm

npm install animate.css –save

Yada direkt olarak github adresi üzerinden (https://github.com/daneden/animate.css) css dosyasını indirip sayfanıza dahil ederek hemen kullanabilirsiniz.

Kullanım

Öncelikle css dosyamızı html sayfamıza dahil ediyor.

<link rel="stylesheet" href="animate.min.css">

Yada isterseniz CDN servislerini kullanarak dahil edebilirsiniz

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">

Artık herşey hazır. Animasyon vermek istediğiniz elemente “animated” classını eklemeniz yeterli. Eğer sürekli animasyonun devam etmesini istiyorsanız “infinite” classını dahil ediyoruz. Sonrasında hangi animasyonu kullanmak istiyorsanız onu class olarak yazmamız yeterlidir.

Animasyonların tam listesi (Animasyonların hepsini test etmek için https://daneden.github.io/animate.css/ adresini ziyaret edebilirsiniz);

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • headShake
  • swing
  • tada
  • wobble
  • jello
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp
  • slideInDown
  • slideInLeft
  • slideInRight
  • slideInUp
  • slideOutDown
  • slideOutLeft
  • slideOutRight
  • slideOutUp

Örnek kullanım

<h1 class="animated infinite bounce">Example</h1>

Çalışan örneği “http://codepen.io/cihanaksoy/pen/bwvVwb” buradaki codepen adresinde görebilirsiniz.

Ayrıca animasyonların bittiği zamanı jQuery ile kontrol edebilirsiniz. Örneğin bir div sildiniz ve bounceOutLeft animasyonu kullandınız.

$('#ornekElement').addClass('animated bounceOutLeft');

Sonrasında bu elementi DOM ‘dan kaldırmak istiyorsunuz.

$('#ornekElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
    $('#ornekElement').remove();
});

Yukarıdaki şekilde kullanırsanız animasyon bittiğinde elementiniz DOM‘dan tamamen kaldırılmış olur.

Bir sonraki makalemizde görüşmek üzere.

1 Yorum

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.