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>

Bu içeriği beğendiyseniz paylaşarak destek olabilirsiniz!


Eğitim İçeriği

Eğitim CSS Dersleri
Kategori Web Programlama
Ders Adeti 52 Ders
Dil Türkçe
Güncelleme 10/2021
  • HTML Dersleri

    HTML Dersleri Sıfırdan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 19 Ders
    Dil Türkçe
    Güncelleme 12/2020
    Derse Başla
  • Java Dersleri

    Java Dersleri ve Nesne Yönelimli Programlama

    Kategori Programlama Dili
    Ders Süresi 125 Ders
    Dil Türkçe
    Güncelleme 09/2020
    Derse Başla
  • CSS Dersleri

    CSS Dersleri Başlangıçtan İleri Seviyeye

    Kategori Web Programlama
    Ders Süresi 49 Ders
    Dil Türkçe
    Güncelleme 10/2021
    Derse Başla
  • Java Örnek Projeler

    Java Örnek Projeler

    Kategori Programlama Dili
    Ders Süresi 20 Ders
    Dil Türkçe
    Güncelleme 10/2022
    Derse Başla