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.