CSS3 Animasyon Yapımı (Transition)
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 Animasyon Yapımı (Transition)

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3192)
RAPOR ET
Bu dersimizde css3 çok güzel özelliklerinden biri olan transition kodunu göreceğiz.Öncelikle işlevinden bahsedelim.Transition ile objelerimize animasyona bağlayabiliriz.Bunu objede her hangi bir değişiklik meydana gelirse yapabiliyoruz.Bu değişiklik hover focus vs.

Transitionun işleyiş mantığı şu.Bir objeye her hangi bir değişiklik olursa bunu animasyon yap diyo.Mesela objeye tasnsition verip color a saniye verip hoverda renk değiştirirsek verdiğimiz süre boyunca değişecektir.Kodlara bakalım daha iyi anlarsınız.Önce genel iskelet yapısına bakalım.

transition: özellik saniye,özellik saniye,özellik saniye ...;

Örnek :

transition:width 2s;
-webkit-transition:width 2s;
-moz-transition:width 2s;
-o-transition:width 2s;


Yukardaki kodumuz objenin width i değişirse 2 saniyede değiştirecektir.

Genel Örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>cArleone</title>
<style type="text/css">
.buton{width:100px;height:25px;background:#ddd;color:#000;text-align:center;transition:width .5s , color 1s;-webkit-transition:width .5s , color 1s; -moz-transition:width .5s , color 1s; -o-transition:width .5s , color 1s; }
.buton:hover{width:200px;color:red;}
</style>
</head>
<body>

<div class="buton">cArleone</div>

</body>
</html>


Yukardaki kodda mouse ile objemizin üzerine gelisek width i 0.5 saniyede 200px olucak 1 saniyede de metin rengi kırmızı olacak .Transition kodumuzla her türlü css ve css3 elemanını animasyona bağlayabiliriz.

NOT: -webkit- -moz- -o- tarayıcı uyumları için.



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