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 :
CSS'de geçiş efekti oluşturmak için iki değer tanımlamalıyız,
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>
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.
<!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>
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'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)