CSS transition özelliği ile geçiş efektleri sağlayabiliriz.Elementlerimizi belirli bir süre boyunca istediğimiz animasyonları ekleyebiliriz.

Bu bölümde aşağıdaki CSS transition özelliklerini öğreneceğiz :

  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • transition-timing-function

CSS Transition Kullanımı

CSS'de geçiş efekti oluşturmak için iki değer tanımlamalıyız,

  • Eklemek istediğimizin efektin CSS özelliğini
  • Süre

Eğer bir süre belirtilmesse, varsayılan değer 0 olacaktır ve geçiş efekti oluşmayacaktır.

Aşağıdaki örnekte 100px genişlik ve 100px yükseklik değeri olan arkaplanı kırmızı bir div etiketini görmektesiniz. Transition özelliği ile div etiketinin, width özelliği için 2 saniyelik bir geçiş efekti tanımlanmıştır. Bu duruma göre, eğer ilgili div etiketinin genişliğinde bir değişiklik olur ise, bu genişlik değişimi 2 saniyelik bir efekt ile gerçekleşecektir.

div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}

Transition (Geçiş efekti), belirtilen CSS özelliği (genişlik) değeri değiştiği sırada başlayacaktır. İlgili div etiketinin hover özelliğine yeni bir genişlik (width) değeri tanımlayalım.

div:hover {
width: 300px;
}

Div etiketinin fare imleci ile üzerine geldiğimiz sırada, etiketin yeni genişliği 300px olacaktır. Transition ile bu yeni durumu algılayıp , genişleme durumunu animasyona çeviriyoruz.

Fare etiketin dışına çıktığında, yavaş yavaş orijinal stiline geri döneceğine de dikkat edin.

 
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
 
div:hover {
width: 300px;
}
</style>
</head>
<body>
 
<h1>Transition Özelliği</h1>
 
<p>Geçiş efektini görmek için aşağıdaki div öğesinin üzerine gelin:</p>
<div></div>
 
</body>
</html>

Birden fazla transition kullanımı

CSS'de birden fazla geçiş efekti uygulamak mümkündür. Aşağıdaki örnekte, genişlik için 2 saniye ve yükseklik için 4 saniye süre ile hem genişlik hem de yükseklik özelliği için bir geçiş efekti oluşturulur:

div {
transition: width 2s, height 4s;
}

Hazır geçiş efektleri kullanmak

CSS'de tanımlı olan geçiş özellikleri ile daha estetiksel geçişler uygulayabilirsiniz. Bunun için CSS'de transition-timing-function özelliğini kullanabilirsiniz.

  • ease - önce yavaş, sonra hızlı, sonra yavaş sonlanan bir geçiş efekti belirtir (bu varsayılandır)
  • linear - baştan sona aynı hızda bir geçiş efekti belirtir
  • ease-in - yavaş başlangıçlı bir geçiş efekti belirtir
  • ease-out - yavaş sonlu bir geçiş efekti belirtir
  • ease-in-out - yavaş bir başlangıç ve bitiş ile bir geçiş efekti belirtir
  • cubic-bezier(n,n,n,n) - cubic-bezier metodunda kendi değerlerinizi tanımlamanıza izin verir
 
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
 
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
 
div:hover {
width: 300px;
}
</style>
</head>
<body>
 
<h1>Transition Özelliği</h1>
 
<p>Geçiş efektini görmek için aşağıdaki div öğesinin üzerine gelin:</p>
 
<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>

Geçiş Efektlerini Zamanlamak : transition-delay kullanımı

CSS'de transition özelliği için bir geçikme sağlamak için trasition-delay özelliği kullanılır.

Aşağıdaki örnek, geçiş efekti başlamadan önce 1 saniyelik bir gecikme sağlar : 

 
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 3s;
transition-delay: 1s;
}
 
div:hover {
width: 300px;
}
</style>
</head>
<body>
 
<h1>Transition Özelliği</h1>
 
<p>Geçiş efektini görmek için aşağıdaki div öğesinin üzerine gelin:</p>
 
 
<div></div>
 
<p><b>Not:</b> Geçiş efekti başlamadan önce 1 saniye gecikmesi var.</p>
 
</body>
</html>

Geçiş Efektlerinde 2B veya 3B Dönüşüm Kullanmak

CSS'de transition ile transform özelliği beraber kullanılabilir. 2B veya 3B dönüşümlerde geçiş efekti uygulayabliiriz.

 
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}
 
div:hover {
width: 300px;
height: 300px;
transform: rotate(180deg);
}
</style>
</head>
<body>
 
<h1>Transition ile Transform Birlikte Kullaımı</h1>
 
<p>Fareyle aşağıdaki div öğesinin üzerine gelin:</p>
 
<div></div>
 
</body>
</html>

CSS Transition Uygulanması

CSS'de transition özellikleri tek tek tanımlanacağı gibi, toplu şekilde de tanımlanabilir.

 
 
 
 
 
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
 
div:hover {
width: 300px;
}
</style>
</head>
<body>
 
<h1>Tek Tek Belirtilen Geçiş Özellikleri</h1>
 
<p>Geçiş efektini görmek için aşağıdaki div öğesinin üzerine gelin::</p>
 
<div></div>
 
<p><b>Not:</b> Geçiş efekti, başlamadan önce 1 saniyelik bir gecikmeye sahiptir.</p>
 
</body>
</html>