- Katılım
- 21 Nis 2021
- Konular
- 1,033
- Mesajlar
- 4,724
- Çözüm
- 15
- Online süresi
- 3mo 27d
- Reaksiyon Skoru
- 1,970
- Altın Konu
- 343
- TM Yaşı
- 5 Yıl 1 Ay 17 Gün
- Başarım Puanı
- 287
- Yaş
- 51
- MmoLira
- 3,408
- DevLira
- 12
ROHAN2 WORLD 1-120 TR TİPİ OFFICIAL YOHARA, BALATHOR VE AMON! 80. GÜNÜNDE! +10.000 ONLİNE! HİLE VE BOT %100 ENGELLİ HEMEN TIKLA!
CSS geçişleri, belirli bir süre boyunca özellik değerlerini sorunsuz bir şekilde değiştirmenize olanak tanır.
Bir CSS geçiş efekti görmek için fareyi aşağıdaki öğenin üzerine getirilir.
Bu bölümde aşağıdaki özellikler hakkında bilgi verelim;
Aşağıdaki örnekte 100px * 100px kırmızı bir <div> öğesi gösterilmektedir. <div> öğesi, width özelliği için 2 saniyelik bir geçiş efekti de belirlemiştir:
Geçiş efekti, belirtilen CSS özelliği (genişlik) değeri değiştirdiğinde başlayacaktır.
Şimdi, bir kullanıcı fareyi <div> öğesinin üzerine getirdiğinde width özelliği için yeni bir değer belirleyelim:
İmleç öğenin dışına çıktığında, yavaş yavaş orijinal stiline geri döneceğine dikkat edin.
Geçiş zamanlama işlevi özelliği aşağıdaki değerlere sahip olabilir:
Aşağıdaki örnek, başlamadan önce 1 saniyelik bir gecikmeye sahiptir:
veya steno özelliğini kullanarak transition:
Bir CSS geçiş efekti görmek için fareyi aşağıdaki öğenin üzerine getirilir.
Bu bölümde aşağıdaki özellikler hakkında bilgi verelim;
- transition
- transition-delay
- transition-duration
- transition-property
- transition-timing-function
CSS Geçişleri Nasıl Kullanılır?
Bir geçiş efekti oluşturmak için iki şey belirtmelisiniz:- efekt eklemek istediğiniz CSS özelliği
- etkinin süresi
Aşağıdaki örnekte 100px * 100px kırmızı bir <div> öğesi gösterilmektedir. <div> öğesi, width özelliği için 2 saniyelik bir geçiş efekti de belirlemiştir:
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Linkleri görebilmek için Turkmmo Forumuna ÜYE olmanız gerekmektedir.
Örnek:
Kod:
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}Geçiş efekti, belirtilen CSS özelliği (genişlik) değeri değiştirdiğinde başlayacaktır.
Şimdi, bir kullanıcı fareyi <div> öğesinin üzerine getirdiğinde width özelliği için yeni bir değer belirleyelim:
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>İmleç öğenin dışına çıktığında, yavaş yavaş orijinal stiline geri döneceğine dikkat edin.
Birkaç Özellik Değerini Değiştirin
Aşağıdaki örnek, genişlik için 2 saniye ve yükseklik için 4 saniye süren hem genişlik hem de yükseklik özelliği için bir geçiş efekti ekler:Örnek:
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>Geçişin Hız Eğrisini Belirtin
transition-timing-functionÖzelliği geçiş etkisi hız eğrisi belirtir.Geçiş zamanlama işlevi özelliği aşağıdaki değerlere sahip olabilir:
- ease - yavaş başlayan, sonra hızlı, sonra yavaş biten 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ş başlangıçlı ve bitişli bir geçiş efekti belirtir
- cubic-bezier(n,n,n,n) - bir kübik-bezier işlevinde kendi değerlerinizi tanımlamanıza izin verir
Kod:
<!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>The transition-timing-function Property</h1>
<p>Hover over the div elements below, to see the different speed curves:</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>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>Geçiş Etkisini Geciktirme
transition-delayÖzelliği geçiş etkisi (saniye olarak) bir gecikme belirtir.Aşağıdaki örnek, başlamadan önce 1 saniyelik bir gecikmeye sahiptir:
Örnek:
Kod:
<!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>The transition-delay Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>Geçiş + Dönüşüm
Aşağıdaki örnek, dönüşüme bir geçiş efekti ekler:Örnek:
Kod:
<!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 + Transform</h1>
<p>Hover over the div element below:</p>
<div></div>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>Daha Fazla Geçiş Örneği
CSS geçiş özellikleri şu şekilde tek tek belirtilebilir:Örnek:
Kod:
<!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>The transition Properties Specified One by One</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>veya steno özelliğini kullanarak transition:
Örnek:
Kod:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s linear 1s;
}
div:hover {
width: 300px;
}
</style>
</head>
<body>
<h1>Using The transition Shorthand Property</h1>
<p>Hover over the div element below, to see the transition effect:</p>
<div></div>
<p><b>Note:</b> The transition effect has a 1 second delay before starting.</p>
<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
</body>
</html>
Son düzenleme:
- Katılım
- 7 May 2010
- Konular
- 10,579
- Mesajlar
- 58,614
- Çözüm
- 219
- Online süresi
- 10mo 29d
- Reaksiyon Skoru
- 16,721
- Altın Konu
- 444
- TM Yaşı
- 16 Yıl 1 Ay 4 Gün
- Başarım Puanı
- 691
- MmoLira
- 19,925
- DevLira
- 601
Paylaşım için teşekkürler
- Katılım
- 19 Ara 2020
- Konular
- 1,566
- Mesajlar
- 6,953
- Çözüm
- 12
- Online süresi
- 2mo 25d
- Reaksiyon Skoru
- 2,468
- Altın Konu
- 122
- TM Yaşı
- 5 Yıl 5 Ay 20 Gün
- Başarım Puanı
- 282
- MmoLira
- -119
- DevLira
- 80
Paylaşım için teşekkürler