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

Anlatımı

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

İlgili elementin üzerine gelince 0.4 saniye gecikmeli olarak toplamda 6 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;
	transition:1s ease;
}

Örnek 2