CSS geçiş özelliği Özellik
Örnek
Bir <div> öğesinin üzerine gelin ve genişliği yumuşak bir geçiş efektiyle değiştirin:
div
{
transition-property: width;
}
div:hover {
width: 300px;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik transition-property
, geçiş efektinin ait olduğu CSS özelliğinin adını belirtir (geçiş efekti, belirtilen CSS özelliği değiştiğinde başlar).
İpucu: Bir kullanıcı bir öğenin üzerine geldiğinde genellikle bir geçiş efekti oluşabilir.
Not: Her zaman geçiş süresi özelliğini belirtin , aksi takdirde süre 0 olur ve geçişin hiçbir etkisi olmaz.
Varsayılan değer: | Tümü |
---|---|
Miras: | Hayır |
canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
Sürüm: | CSS3 |
JavaScript sözdizimi: | nesne .style.transitionProperty="genişlik,yükseklik" |
Tarayıcı Desteği
Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.
-webkit-, -moz- veya -o- ile takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.
Property | |||||
---|---|---|---|---|---|
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|property|initial|inherit;
Mülk değerleri
Value | Description |
---|---|
none | No property will get a transition effect |
all | Default value. All properties will get a transition effect |
property | Defines a comma separated list of CSS property names the transition effect is for |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Daha fazla örnek
Örnek
Bir <div> öğesinin üzerine gelin ve genişlik VE yüksekliği yumuşak bir geçiş efektiyle değiştirin:
div {
transition-property: width, height;
}
div:hover {
width: 300px;
height: 300px;
}
İlgili Sayfalar
CSS eğitimi: CSS Geçişleri
HTML DOM referansı: geçişÖzelliği özelliği