TL
Tool Lab
💰Donate
💰Donate

CSS Transition Generator

Configure CSS transitions with hover preview.

Gecis 1
Uzerime gel
.element {
  transition: all 0.3s ease 0s;
}

.element:hover {
  /* apply your hover styles here */
}

Bu araç hakkında

CSS Gecis Olusturucu, hedef ozelligi, sureyi, zamanlama fonksiyonunu ve gecikmeyi ayarlayarak transition kisayol ozelligini yapılandırmanızı saglar. Interaktif on izleme, kodu kopyalamadan once gecis davranisini gormenizi saglar.

CSS gecisleri, :hover, :focus gibi sozde siniflar veya JavaScript ile sinif degisiklikleri tarafindan tetiklenen iki CSS degeri arasinda yukun gecis degisiklikleri olusturur.

Nasıl kullanılır

  1. Gecis icin CSS ozelligi secin (veya all kullanin).
  2. Sureyi ayarlayin — gecis ne kadar surer (orn. 0.3s).
  3. Ivme egrisini kontrol etmek icin bir zamanlama fonksiyonu secin.
  4. Istegle gecis baslmadan once bir gecikme ekleyin.
  5. Efekti canli gormek icin on izleme kutusunun uzerine gelin, ardindan CSS kopyalayin.

Kullanım senaryoları

Gelisiticiler gecisleri dugme hover efektleri, kart buyutme ve navigasyon linklerindeki renk degisimleri icin kullanir. Form tasarimcilari input focus stilleri icin kullanir.

Sık sorulan sorular

  • transition ile animation arasindaki fark nedir? — Gecisler bir durum degisimine (hover gibi) tepki verir; animasyonlar keyframe kullanarak otomatik olarak veya dongu halinde calisir.
  • Birden fazla ozelligi gecistirebilir miyim? — Evet. Virglulle ayrilmis birden fazla ozellik kurali eklemek icin "Gecis ekle"ye tiklayin.
  • Hangi ozellikler gecistirilebilir? — Sayisal degerli ozelliklerin cogu: opacity, color, transform, boyutlar vb. Display gibi ozellikler gecistirilemez.