6XC

CSS Animasyon Oluşturucu

Hazır keyframe kalıbı seçin — dönme, nabız, zıplama, sallanma, solma, kayma — süreyi ve tekrarı ayarlayıp @keyframes + sınıfı kopyalayın.

635 görüntülenme

CSS Animasyonları

Bir animasyon, @keyframes bloğunu (ne değişecek) animation özelliğiyle (nasıl oynayacak: süre, eğri, tekrar sayısı) eşleştirir. Geçişlerin aksine kendi kendine çalışır; hover veya sınıf değişimi gerekmez. Bu üretici altı hazır kalıp sunar; hem keyframes'i hem kullanıma hazır sınıfı üretir.

Sıkça Sorulan Sorular

Animasyon mu geçiş (transition) mi?

Transition bir durum değişimine tepki verir (hover, sınıf). Animasyon kendi başına çalışır, sonsuz dönebilir ve çok adım tanımlayabilir — spinner, dikkat nabzı ve giriş efektleri için animasyon kullanın.

Az hareket tercih eden kullanıcılara nasıl saygı gösteririm?

Animasyonu @media (prefers-reduced-motion: no-preference) { … } içine alın veya reduce varyantında kapatın — denge hassasiyeti olan kullanıcılar için önemlidir.

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