CSS Geçiş Jeneratörü Özellik, süre, yumuşatma ve hover efektleri ile özelleştirilebilir CSS geçişleri oluşturun.

🎨

CSS Geçiş Jeneratörü

Özellik, süre, yumuşatma ve hover efektleri ile özelleştirilebilir CSS geçişleri oluşturun.

Geçiş özelliklerini ayarla

CSS özelliğini geçiş, süre, zamanlama fonksiyonu ve gecikme için seçin.

Hover durumunu tanımla

Hover arka plan rengini, ölçekleme, kenar yarıçapını ve döndürmeyi ayarlayın.

Test et ve kopyala

Ön izleme öğesi üzerinde gezinmeyle geçişi test edin, ardından CSS'yi kopyalayın.

Loading tool...

What Is CSS Geçiş Jeneratörü?

CSS Geçiş Oluşturucu, CSS özellik değerleri arasında pürüzsüz durum geçişleri oluşturur. Otomatik olarak çalışabilen animasyonların aksine, geçişler bir tetikleyici gerektirir - genellikle bir hover, odaklanma veya aktif durum. Bu araç, her geçiş parametresini yapılandırmanıza olanak tanır: hangi özelliğin hedeflenmesi gerektiğini, geçişin ne kadar sürdüğünü, hangi hızlandırma işlevinin kullanılacağını ve başlama öncesi ne kadar gecikileceğini. Standart hızlandırma işlevlerinin yanı sıra, ease-in-back, ease-out-back ve ease-in-out-back gibi popüler kübik-bezier ön ayarları da içerir ve bu, esnek efektler için kullanılır. Hover durumu bölümü, hover üzerinde hangi değişikliklerin yapılacağını tanımlamanızı sağlar - arka plan rengi, ölçek, kenar yarıçapı ve döndürme - böylece gerçek zamanlı olarak geçişi ön izleme öğesi üzerine gelerek test edebilirsiniz.

Why Use CSS Geçiş Jeneratörü?

Tam geçiş kontrolleri ile özellik hedeflemesi
Bouncy ve özel yavaşlatma için yerleşik cubic-bezier ön ayarları
Gerçek zamanlı test için etkileşimli hover ön izleme
Hem temel hem de hover durumu CSS kodu oluşturur

Common Use Cases

Düğme Hover Etkileri

Etkileşimli düğmeler için pürüzsüz renk ve ölçek geçişleri oluşturun.

Kart Etkileşimleri

Kart hover durumlarına kaldırma ve gölge geçişleri ekleyin.

Menü Animasyonları

Açılır menüler ve navigasyon öğeleri için pürüzsüz geçişler.

Form Odak Durumları

Form girişi odaklandığında kenarlık ve gölge değişikliklerini canlandırın.

Technical Guide

CSS geçiş özelliği, geçiş-özelliği, geçiş-süresi, geçiş-zamanlama-işlevi ve geçiş-gecikmesi için kısaltmadır. Geçiş-özelliği belirli özelliklere hedeflenebilir veya her şey için tümünü kullanabilir. Süre ve gecikme saniye veya milisaniye olarak kullanılır. Zamanlama işlevi hız eğrisini tanımlar: doğrusal sabit hızı, ease yavaş başlar sonra hızlanır sonra yavaşlar, ease-in yavaş başlar, ease-out yavaş sona erer. Özel eğriler kübik-bezier(x1, y1, x2, y2) işlevini kullanır ve dört değer kontrol noktalarını tanımlar. 0-1 dışında y değerleri için aşkın/sekme efektleri oluşturulur. Performans için, mümkün olduğunda yalnızca dönüşüm ve saydamlık geçişi yapılır. Birden çok geçiş, farklı özellikler için farklı zamanlamalarla virgülle ayrılmış değerler kullanılarak tanımlanabilir. Geçişler, JavaScript tarafından ayarlanan değerler ve sınıf eklemeleri dahil olmak üzere herhangi bir özellik değişikliği tarafından tetiklenir.

Tips & Best Practices

1
Daha iyi performans için tüm yerine belirli özelliklere hedefleyin
2
Zıplama efektleri oluşturmak için y-koordinatları için >1 olan cubic-bezier değerlerini kullanın
3
UI etkileşimleri için geçişleri 300ms'nin altında tutun untuk hızlı bir his için
4
Geçişi temel duruma, hover durumuna değil ekleyin

Related Tools

CSS Düğme Oluşturucu

Renkler, iç boşluklar, sınırlar, gölgeler ve hover efektleri ile özel CSS düğmeleri tasarlayın.

🎨 CSS & Design

CSS Dönüşüm Oyun Alanı

Dönme, ölçekleme, eğme ve çevirme dahil CSS dönüşümleri ile 3B perspektif deneyimi yaşayın.

🎨 CSS & Design

CSS Animasyon Oluşturucu

Önceden tanımlanmış efektler ve özelleştirilebilir zamanlama ile CSS anahtar kare animasyonları oluşturun.

🎨 CSS & Design

CSS Döner Oluşturucu

Özelleştirilebilir stillerle CSS yükleniyor animasyonları ve dönen yükleyiciler oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q Geçiş ve animasyon arasındaki fark nedir?

Geçişler bir tetikleyiciye ihtiyaç duyar ve iki durum arasında canlanır. Animasyonlar otomatik olarak çalışabilir ve birden fazla aşama içerebilir.

Q Birden çok özelliği geçişe sokabilir miyim?

Evet, virgülle ayrılmış değerleri veya tüm özelliklere etki etmek için transition: all kullanın.

Q Hangi yavaşlatma fonksiyonunu kullanmalıyım?

Girişler için ease-out en iyisidir, çıkışlar için ease-in, durum değişiklikleri için ease-in-out ve sürekli hareket için doğrusal.

Q Neden geçişim çalışmıyor?

Özelliğin canlandırılabilir olduğunu, geçişin temel durumunda (hover değil) olduğunu ve belirli bir CSS değerini değiştirdiğinizden emin olun.

Q Tüm CSS özellikleri geçişe sokulabilir mi?

Hayır, yalnızca ara değerleri olan özellikler geçişe sokulabilir. Görüntüleme gibi özellikler aniden değişir.

About This Tool

CSS Geçiş Jeneratörü is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.