Bugün özellikle yaratıcı web tasarımların’da karşımıza çıkan ve profesyonel web tasarımcıların daima başının üstünde tuttuğu gözde css özelliklerinden biri olan geçiş efektlerini yani css transition özelliğini göreceğiz bu özelliği kullanması kolay ve ayrıca hayal edebileceğiniz her şeyde kolay bir şekilde uygulayarak çeşitli projelere harika bir imza atabilirsiniz.
Nedir Bu Özellik ?
CSS geçişleri (transitions), belirli bir süre boyunca özellik değerlerini (bir değerden diğerine) yumuşak bir şekilde değiştirmenize izin verir.
İşte Kodlarımız…
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s; /* burada geçiş özelliğini genişlik için kullanmasını söylemiş olduk isterseniz height yani yükseklik değeri belirleyebilirsiniz veya hepsinde etkili olması için sadece 2s yazmak yeterlidir böylelikle hem genişlikte hemde yükseklikte geçiş özelliği uygulanacaktır */
}
/* Safari Tarayıcı İçin */
#div1 {-webkit-transition-timing-function: linear;}
#div2 {-webkit-transition-timing-function: ease;}
#div3 {-webkit-transition-timing-function: ease-in;}
#div4 {-webkit-transition-timing-function: ease-out;}
#div5 {-webkit-transition-timing-function: ease-in-out;}
/* Standart Kod Kullanımı */
#div1 {transition-timing-function: linear;} /* Baştan sona aynı hızda bir geçiş efekti belirtir*/
#div2 {transition-timing-function: ease;} /* önce yavaş bir başlangıç yapar, sonra hızlanıp, yavaşça sona erer (yumuşak geçiş) */
#div3 {transition-timing-function: ease-in;} /* yavaş bir başlangıç ile geçiş efektini belirtir */
#div4 {transition-timing-function: ease-out;} /* Yavaş son ile geçiş efektini belirtir */
#div5 {transition-timing-function: ease-in-out;} /* yavaş başlangıç ve bitiş ile geçiş efektini belirtir */
div:hover {
width: 300px;
}
</style>
</head>
<body>
<p>Kırmızı Dikdörtgenlerin Üzerine Fareyi Getirin</p>
Not: Bu örnek, Internet Explorer 9 ve önceki sürümlerinde çalışmaz.
<div id=”div1″>linear</div><br>
<div id=”div2″>ease</div><br>
<div id=”div3″>ease-in</div><br>
<div id=”div4″>ease-out</div><br>
<div id=”div5″>ease-in-out</div><br>
</body>
</html>
Demo: https://www.w3schools.com/code/tryit.asp?filename=FXEXMH02YQGH