CSS Dersleri 42 - Transition ile Geçiş Efekti Yapımı

Merhaba değerli Kodlama Vakti takipçileri, bu dersimizde CSS'de Transition ile Geçiş Efekti Yapımı Konusunu öğreneceğiz.

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.

<!DOCTYPE html>
<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

<!DOCTYPE html>
<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 :

<!DOCTYPE html>
<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.

<!DOCTYPE html>
<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.

<!DOCTYPE html>
<html>
<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>