CSS3 Hazır Animasyonlar
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS3 Hazır Animasyonlar

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(3622)
RAPOR ET
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>




davmaneydi
davmaneydi 2 Yıl Önce Cevaplandı
Hocam işime yaradı teşekkürler css 3 derslerini daha toparlı olsaydı daha iyi olurdu.
annenD
annenD 37 Gün Önce Cevaplandı
peki animasyonu durdurma olayını nasıl yapacağız ?



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol