6XC

CSS Transition (Geçiş) Oluşturucu

Geçişi kurun — özellik, süre, zamanlama eğrisi ve gecikme — tek tıkla canlı test edin.

911 görüntülenme

transition Özelliği

Söz dizimi: transition: özellik süre zamanlama-eğrisi gecikme. Hover, odak veya sınıf değişimiyle tetiklenen değişimleri animasyonlar. Zamanlama eğrisi hissi belirler: ease doğal varsayılandır, ease-out girişlere yakışır, özel cubic-bezier eğrileri yaylanma efekti verir. Test düğmesine basarak ayarlarınızı canlı izleyin.

Sıkça Sorulan Sorular

Hangi özellikleri animasyonlamak ucuzdur?

transform ve opacity — tarayıcı bunları yerleşimi yeniden hesaplamadan GPU'da birleştirir. width, height veya top animasyonu her karede yerleşim hesaplatır ve takılabilir.

İyi bir varsayılan süre nedir?

Küçük arayüz geri bildirimleri (buton, hover) için 150-250 ms, büyük hareketler için 300-500 ms. ~700 ms üzeri arayüzü hantal hissettirir.

Benzer Araçlar

CSS Gradient Oluşturucu Doğrusal, dairesel ve konik CSS degradelerini canlı önizlemeyle tasarlayın, kodu kopyalayın. Oluştur CSS Box Shadow (Gölge) Oluşturucu Kutu gölgesini görsel olarak tasarlayın — kaydırma, bulanıklık, yayılma, renk, opaklık ve inset — canlı önizlemeli. Oluştur CSS Border Radius Oluşturucu Köşeleri tek tek veya hep birlikte, px ya da % olarak yuvarlayın — canlı önizleme ve kopyalanabilir CSS. Oluştur CSS Text Shadow (Yazı Gölgesi) Oluşturucu Yazı gölgesini kaydırma, bulanıklık, renk ve opaklıkla tasarlayın — örnek metin üzerinde canlı önizleme. Oluştur