CSS'de Transition ile Geçiş Efekti Yapımı

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>

# 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>

# 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>

Sorular (0)