CSS geçişi Özellik
Örnek
Genişliği kademeli olarak 100 pikselden 300 piksele değiştirmek için bir <div> öğesinin üzerine gelin:
div
{
width: 100px;
transition: width 2s;
}
div:hover {
width: 300px;
}
Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.
Tanım ve Kullanım
Özellik transition, aşağıdakiler için kestirme bir özelliktir:
Not: Her zaman geçiş süresi özelliğini belirtin , aksi takdirde süre 0s olur ve geçişin hiçbir etkisi olmaz.
| Varsayılan değer: | tüm 0'lar 0'ları kolaylaştırır |
|---|---|
| Miras: | Hayır |
| canlandırılabilir: | Hayır. Canlandırılabilir hakkında bilgi edinin |
| Sürüm: | CSS3 |
| JavaScript sözdizimi: | nesne .style.transition="tüm 2'ler" |
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 | 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 duration timing-function delay|initial|inherit;
Mülk değerleri
| Value | Description |
|---|---|
| transition-property | Specifies the name of the CSS property the transition effect is for |
| transition-duration | Specifies how many seconds or milliseconds the transition effect takes to complete |
| transition-timing-function | Specifies the speed curve of the transition effect |
| transition-delay | Defines when the transition effect will start |
| 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 <input type="text"> odaklandığında, genişliği kademeli olarak 100 pikselden 250 piksele değiştirin:
input[type=text] {
width: 100px;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
İlgili Sayfalar
CSS eğitimi: CSS Geçişleri
HTML DOM referansı: geçiş özelliği