CSS3'te Transitions (Geçişler) Örnekleri 1

Anlatımı

.ilgili-element-sinifi {
   transition: [özellikleri] [süresi] [zamanlama fonksiyonu] [gecikme zamanı];
}

---

Örneklerle daha iyi anlamaya çalışalım.
İlgili elementin üzerine gelince 0.4 saniye gecikmeli olarak toplamda 1 saniyede yazı rengi değişimi olacaktır.
Örnek 1 CSS

a
{
   padding:5px;
   background:red;
   color:white;
   font-size:20px;
   transition-property:color;
   transition-delay:0.4s; 0.4. saniyeden itibaren başla
   transition-duration:6s; 6 saniyede olayı tamamla
}
a:hover
{
   color:black;
}

Örnek 1 HTML

 <a>Link<a>

Örnek 1

---

İlgili elementin üzerine gelince 1sn gecikmeli olarak genişlik ve yükseklik değişimi olacaktır. Elementi mouse terk edince eski haline 1sn gecikmeli olarak geri dönecektir.
Örnek 2 Kod

.css3-transitions-ornek2
{
   background:red;
   width:200px;
   height:40px;
   color:#fff;
   padding:3px;
   font-family:'Arial';
   transition-property:width;Geçişin width üzerinde olmasını belirtiyoruz
   transition:1s ease;
}
.css3-transitions-ornek2:hover
{
   width:250px;
   height:60px;
   transition:1s ease;
}

Örnek 2

---

Son olarak bir buton efekti vermeye çalışalım.
Örnek 3 Kod

.css3-transitions-ornek3
{
   background:red;
   color:#fff;
   padding:3px;
   transition:1s ease all;
}
.css3-transitions-ornek3:hover
{
   background:blue;
   color:red;
}