Yazılım Örnekleri

CSS 3 ile gelen bir yenilikte  transition özelliği. Çok kullanılışlı bir özellik.Bu özellik jQuery ile yapılabilecek basit hover , animation , fade vb özellikleri yapabilmemizi sağlıyor.Kod kullanımı sırasıyla :

background-color :    2s       linear       5s;

transition-property: Geçişin uygulandığı özelliğin adını belirler.

transition-duration: Geçişin toplam süresini tanımlar.

transition-timing-function: Bir geçiş sırasında hızın nasıl hesaplanacağını açıklar.

transition-delay: Geçişin ne zaman başlayacağını tanımlar.

Birkaç Örnek Yapalım :

<style>
.ornek1{
width:100px;
height:100px;
background:#096;
}
.ornek1:hover{
transition:width 2s;
-webkit-transition:width 2s;
-moz-transition:width 2s;
width:300px;
} 
</style>

<div class="ornek1">css transition Özelliği Örnekler</div>

<style>
.ornek2{
width:100px;
height:40px;
background:#096;
color:#FFF;
}
.ornek2:hover{
background-color:#036;
-o-transition:background-color 4s;
-webkit-transition: background-color 4s ;
-moz-transition: background-color 4s ;
} 
</style>

<div class="ornek2">4 saniyede arka plan rengi değişir</div>

<style>
.ornek3{
width:80px;
height:80px;
background:#096;
color:#FFF;
}
.ornek3:hover{
background-color:#036;
margin-left:200px;
-o-transition:margin-left 3s linear, background-color 1s linear 3s;
-webkit-transition:margin-left 3s linear, background-color 1s linear 3s;
-moz-transition:margin-left 3s linear , background-color 1s linear 3s;
} 
</style>

<div class="ornek3">4 saniyede kayar arka planı değiştirir</div>