Bu dersimizde için de tam
65 hazır animasyonun bulunduğu
Animate.css göstereceğim.Css3 ile gelen yeni özelliklerle farklı farklı onlarca değişik animasyon yapabiliriz.Burada
http://ustaderslik.com/konu/CSS3_Animasyon_Yapımı_-_Animation yapımını anlatmıştım.
Animate.css ise bizim için animasyonları hazırlamış ve tek dosya için de bize sunmuş.Şuradan
http://daneden.github.io/animate.css/ animate.css indirerek sayfaya dahil ettiğimiz de tüm animasyonları kullanabiliriz.Kullanmak için class önce
animated daha sonra
animasyon classını yazıyoruz.
<div class="kutu animated rotateIn"></div>
gibi.
Kullanmak istemediğiniz tüm animasyonları css dosyasından silebilirsiniz.Silmek için animasyon ismine sahip classı,daha sonra aynı isimdeki 2 keyframesi silmemiz yeterli.
İndir : http://ustaderslik.com/dosya/animation.css.zip
İncele : http://ustaderslik.com/ornek/animation/
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<link rel="stylesheet" href="animate.css" />
<style type="text/css">
.kutu{width:150px;height:150px;line-height:150px;font-size:22px;text-align:center;color:#fff;background:#15d4f5;margin:auto;margin-bottom:25px;animation-iteration-count:infinite;-webkit-animation-iteration-count:infinite;}
</style>
</head>
<body>
<div class="kutu animated bounce">bounce</div>
<div class="kutu animated flash">flash</div>
<div class="kutu animated pulse">pulse</div>
<div class="kutu animated rubberBand">rubberBand</div>
<div class="kutu animated shake">shake</div>
<div class="kutu animated swing">swing</div>
<div class="kutu animated tada">tada</div>
<div class="kutu animated wobble">wobble</div>
<div class="kutu animated bounceIn">bounceIn</div>
<div class="kutu animated bounceInDown">bounceInDown</div>
<div class="kutu animated bounceInLeft">bounceInLeft</div>
<div class="kutu animated bounceInRight">bounceInRight</div>
<div class="kutu animated bounceInUp">bounceInUp</div>
<div class="kutu animated bounceOut">bounceOut</div>
<div class="kutu animated bounceOutDown">bounceOutDown</div>
<div class="kutu animated bounceOutLeft">bounceOutLeft</div>
<div class="kutu animated bounceOutRight">bounceOutRight</div>
<div class="kutu animated bounceOutUp">bounceOutUp</div>
<div class="kutu animated fadeIn">fadeIn</div>
<div class="kutu animated fadeInDown">fadeInDown</div>
<div class="kutu animated fadeInDownBig">fadeInDownBig</div>
<div class="kutu animated fadeInLeft">fadeInLeft</div>
<div class="kutu animated fadeInLeftBig">fadeInLeftBig</div>
<div class="kutu animated fadeInRight">fadeInRight</div>
<div class="kutu animated fadeInUp">fadeInUp</div>
<div class="kutu animated fadeInUpBig">fadeInUpBig</div>
<div class="kutu animated fadeOut">fadeOut</div>
<div class="kutu animated fadeOutDown">fadeOutDown</div>
<div class="kutu animated fadeOutDownBig">fadeOutDownBig</div>
<div class="kutu animated fadeOutLeft">fadeOutLeft</div>
<div class="kutu animated fadeOutLeftBig">fadeOutLeftBig</div>
<div class="kutu animated fadeOutRight">fadeOutRight</div>
<div class="kutu animated fadeOutRightBig">fadeOutRightBig</div>
<div class="kutu animated fadeOutUp">fadeOutUp</div>
<div class="kutu animated fadeOutUpBig">fadeOutUpBig</div>
<div class="kutu animated flip">flip</div>
<div class="kutu animated flipInX">flipInX</div>
<div class="kutu animated flipInY">flipInY</div>
<div class="kutu animated flipOutX">flipOutX</div>
<div class="kutu animated flipOutY">flipOutY</div>
<div class="kutu animated lightSpeedIn">lightSpeedIn</div>
<div class="kutu animated lightSpeedOut">lightSpeedOut</div>
<div class="kutu animated rotateIn">rotateIn</div>
<div class="kutu animated rotateInDownLeft">rotateInDownLeft</div>
<div class="kutu animated rotateInDownRight">rotateInDownRight</div>
<div class="kutu animated rotateInUpLeft">rotateInUpLeft</div>
<div class="kutu animated rotateInUpRight">rotateInUpRight</div>
<div class="kutu animated rotateOut">rotateOut</div>
<div class="kutu animated rotateOutDownLeft">rotateOutDownLeft</div>
<div class="kutu animated rotateOutDownRight">rotateOutDownRight</div>
<div class="kutu animated rotateOutUpLeft">rotateOutUpLeft</div>
<div class="kutu animated rotateOutUpRight">rotateOutUpRight</div>
<div class="kutu animated hinge">hinge</div>
<div class="kutu animated rollIn">rollIn</div>
<div class="kutu animated rollOut">rollOut</div>
<div class="kutu animated zoomIn">zoomIn</div>
<div class="kutu animated zoomInDown">zoomInDown</div>
<div class="kutu animated zoomInLeft">zoomInLeft</div>
<div class="kutu animated zoomInRight">zoomInRight</div>
<div class="kutu animated zoomInUp">zoomInUp</div>
<div class="kutu animated zoomOut">zoomOut</div>
<div class="kutu animated zoomOutDown">zoomOutDown</div>
<div class="kutu animated zoomOutLeft">zoomOutLeft</div>
<div class="kutu animated zoomOutRight">zoomOutRight</div>
<div class="kutu animated zoomOutUp">zoomOutUp</div>
</body>
</html>
UstaDerslik
