CSS3 Geçişler
CSS3 geçişleri sorunsuz özellik değerlerini değiştirmek için izin verir (from one value to another) belirli bir süre boyunca,.
Örnek: Fare öğesi üzerinde altında bir CSS3 geçiş etkisini görmek için:
Geçişler için Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar ardından -webkit-, -moz- veya -o- bir önek ile çalıştığım ilk versiyonunu belirtin.
| özellik | |||||
|---|---|---|---|---|---|
| transition | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-delay | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-duration | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-property | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
| transition-timing-function | 26.0 4.0 -webkit- |
10.0 | 16.0 4.0 -moz- |
6.1 3.1 -webkit- |
12.1 10.5 -o- |
Nasıl CSS3 Geçişleri Kullanılır?
Bir geçiş efekti yaratmak için, iki şey belirtmek gerekir:
- CSS özelliği efekt eklemek istediğiniz
- etki süresi
Note: süresi parçası belirtilmemişse varsayılan değer 0, çünkü geçiş, hiçbir etkisi olmayacaktır.
Aşağıdaki örnekte bir gösterir 100px * 100px kırmızı <div> öğesi. <div> elemanı 2 saniyelik bir süre ile, genişlik özelliği için bir geçiş etkisini belirlemiştir:
Örnek
div
{
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s; /* Safari */
transition: width 2s;
}
Belirtilen CSS özelliği ise, geçiş etkisi başlar (width) değeri değişir.
Şimdi, genişlik özelliği için yeni bir değer belirtmek izin verdiğinde bir kullanıcı fareyle üzerine <div> elemanı:
İmleç mouse elemanın dışarı, yavaş yavaş kendi özgün tarzı geri dönecektir zaman dikkat edin.
Çeşitli Mülkiyet Değerlerini Değiştir
Aşağıdaki örnek, genişlik için 2 saniye ve yüksekliği 4 saniyelik bir süre ile genişlik ve yükseklik özelliği her ikisi için bir geçiş etkisi, ekler:
Örnek
div
{
-webkit-transition: width 2s, height 4s; /*
Safari */
transition: width 2s, height 4s;
}
Kendin dene " Geçiş Hız Eğrisi belirtin
transition-timing-function özelliği geçiş etkisi hız eğrisi belirtir.
Geçiş-zamanlama fonksiyonlu özelliği, aşağıdaki değerlere sahip olabilir:
-
ease- yavaş bir başlangıç ile bir geçiş efekti belirtir, ardından hızlı, daha sonra yavaş yavaş sona (this is default) -
linear- baştan sona aynı hızda olan bir geçiş etkisi belirtir -
ease-in- yavaş bir başlangıç ile bir geçiş efekti belirtir -
ease-out- yavaş ucu olan bir geçiş etkisi belirtir -
ease-in-out- yavaş bir başlangıç ve sonu ile bir geçiş efekti belirtir -
cubic- bezier(n,n,n,n)- Bir kendi değerlerini tanımlamak sağlar cubic-bezier fonksiyonu
Aşağıdaki örnek, kullanılabilen farklı hız eğrilerinin 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;} Kendin dene " Geçiş Etkisi ertele
transition-delay özelliği bir gecikme belirtir (in seconds) geçiş etkisi.
Aşağıdaki örnek, çalışmaya başlamadan önce, 1 saniyelik bir gecikme var
Geçiş + Dönüşüm
Aşağıdaki örnek, aynı zamanda, geçiş yönünde bir dönüşüm ekler:
Örnek
div {
-webkit-transition: width 2s, height
2s, -webkit-transform 2s; /* Safari */
transition:
width 2s, height 2s, transform 2s;
} Kendin dene " Daha fazla geçiş Örnekler
CSS3 geçiş özellikleri böyle tek tek, belirtilebilir:
Örnek
div
{
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}
Kendin dene " veya kısaltılmış özelliği kullanarak transition :
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 » Egzersiz 4» Egzersiz 5 »
CSS3 Geçiş Özellikleri
Aşağıdaki tablo, her geçiş özelliklerini listeler:
| özellik | Açıklama |
|---|---|
| transition | tek bir özellik olarak, dört geçiş özelliklerini ayarlamak için bir kestirme özelliği |
| transition-delay | Bir gecikme belirtir (in seconds) geçiş etkisi |
| transition-duration | Bir geçiş efekti tamamlamak için kaç saniye veya milisaniye belirtir |
| transition-property | geçiş efekti içindir CSS özelliğinden adını belirtir |
| transition-timing-function | geçiş etkisi hız eğrisi belirtir |