Örnek
Bir üzerine getirin <div> elemanı ve yumuşak bir geçiş etkisi ile genişliğini değiştirmek:
div
{
-webkit-transition-property: width; /* Safari */
transition-property: width;
}
div:hover {
width: 300px;
} Kendin dene " Daha "Try it Yourself" Aşağıdaki örnekler.
Tanımı ve Kullanımı
Geçiş-mülk mülkiyet geçiş efekti içindir CSS özelliğin adını belirtir (the transition effect will start when the specified CSS property changes) .
Tip: zaman bir geçiş etkisi tipik olarak ortaya çıkabilecek bir eleman, bir kullanıcı üzerine gelme.
Note: Her zaman geçiş süreli özelliğini belirtin aksi süresi 0 olduğu ve geçiş hiçbir etkisi olmayacaktır.
| Varsayılan değer: | all |
|---|---|
| Miras: | no |
| canlandırılabilir: | no. Read about animatable |
| Versiyon: | CSS3 |
| JavaScript sözdizimi: | object .style.transitionProperty="width,height" Try it |
Tarayıcı Desteği
Tablodaki rakamlar tam özelliğini destekleyen ilk tarayıcı sürümü belirtin.
Sayılar -webkit-, -moz- ardından veya önek ile çalıştı ilk sürümü belirtmek -O-.
| özellik | |||||
|---|---|---|---|---|---|
| transition-property | 26,0 4,0 -webkit- | 10.0 | 16.0 4,0 -moz- | 6.1 3.1 -webkit- | 12.1 10.5 -o- |
CSS sözdizimi
transition-property: none|all| Mülkiyet Değerler değer Açıklama none Hiçbir özelliği bir geçiş efekti alacak all Varsayılan değer. Tüm özellikler bir geçiş efekti alacak property Geçiş etkisi için CSS özellik adlarının virgülle ayrılmış bir listesini tanımlar initial varsayılan değerine bu özelliği ayarlar. İlk hakkında okuyun inherit üst öğesinden bu özelliği devralır. Yaklaşık miras oku
Diğer Örnekler
Örnek
Bir üzerine getirin <div> elemanı ve yumuşak bir geçiş etkisi ile genişliğini ve yüksekliğini değiştirmek:
div {
-webkit-transition-property: width, height; /*
Safari */
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
} Kendin dene "
İlgili Sayfalar
CSS öğretici: CSS3 Geçişler
HTML DOM referansı: transitionProperty property