CSS Geçişleri
CSS Geçişleri
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 getirin:
Bu bölümde aşağıdaki özellikler hakkında bilgi edineceksiniz:
transitiontransition-delaytransition-durationtransition-propertytransition-timing-function
Geçişler için Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
| Property | |||||
|---|---|---|---|---|---|
| transition | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-delay | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-duration | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-property | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
| transition-timing-function | 26.0 | 10.0 | 16.0 | 6.1 | 12.1 |
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
Not: Süre kısmı belirtilmemişse, varsayılan değer 0 olduğu için geçişin bir etkisi olmayacaktır.
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:
Örnek
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:
Örnek
div:hover
{
width: 300px;
}
İ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
div
{
transition: width 2s, height 4s;
}
Geçişin Hız Eğrisini Belirtin
Özellik transition-timing-function, geçiş etkisinin hız eğrisini 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 belirtirease-in- yavaş başlangıçlı bir geçiş efektini belirtirease-out- yavaş sonlu bir geçiş efekti belirtirease-in-out- yavaş başlangıçlı ve bitişli bir geçiş efekti belirtircubic-bezier(n,n,n,n)- bir kübik-bezier işlevinde kendi değerlerinizi tanımlamanıza izin verir
Aşağıdaki örnek, kullanılabilecek farklı hız eğrilerinden bazılarını göstermektedir:
Örnek
#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;}
Geçiş Etkisini Geciktir
Özellik transition-delay, geçiş efekti için bir gecikme (saniye cinsinden) belirtir.
Aşağıdaki örnek, başlamadan önce 1 saniyelik bir gecikmeye sahiptir:
Örnek
div {
transition-delay: 1s;
}
Geçiş + Dönüşüm
Aşağıdaki örnek, dönüşüme bir geçiş efekti ekler:
Örnek
div {
transition:
width 2s, height 2s, transform 2s;
}
Daha Fazla Geçiş Örneği
CSS geçiş özellikleri şu şekilde tek tek belirtilebilir:
Örnek
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
veya steno özelliğini kullanarak transition:
Örnek
div
{
transition: width 2s linear 1s;
}
CSS Geçiş Özellikleri
Aşağıdaki tablo tüm CSS geçiş özelliklerini listeler:
| Property | Description |
|---|---|
| transition | A shorthand property for setting the four transition properties into a single property |
| transition-delay | Specifies a delay (in seconds) for the transition effect |
| transition-duration | Specifies how many seconds or milliseconds a transition effect takes to complete |
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-timing-function | Specifies the speed curve of the transition effect |