CSS Animasyon Oluşturucu
CSS Animation Generator; fade in, slide in, bounce in, pulse, spin, shake ve zoom gibi 14 hazır ayardan, süre, zamanlama fonksiyonu ve tekrar sayısı kontrolleriyle @keyframes animasyonları oluşturur.
Bu araç hakkında
CSS Animation Generator; fade in, slide in, bounce in, pulse, spin, shake ve zoom gibi 14 hazır ayardan, süre, zamanlama fonksiyonu ve tekrar sayısı kontrolleriyle @keyframes animasyonları oluşturur.
Nasıl kullanılır
- Bir animasyon hazır ayarı seçin.
- Süreyi, zamanlama fonksiyonunu ve tekrar sayısını ayarlayın.
- Önizlemek için Replay'e basın.
- @keyframes ve animation kuralını almak için Copy CSS'e tıklayın.
Bilmekte fayda var
- Bir CSS animasyonu iki parçadan oluşur: bir @keyframes kuralı ve öğedeki animation özelliği.
- transform ve opacity'yi canlandırmak performans açısından genellikle en akıcı seçimdir.
- ease-out gibi zamanlama fonksiyonları hızlı başlayıp yavaşlar; bu da giriş animasyonlarında doğal hissettirir.
- Daha az hareket isteyen kullanıcılar için prefers-reduced-motion medya sorgusuna uyun.
- Sonsuz tekrar sayısı yükleme göstergelerine uygundur; giriş efektleri genellikle bir kez çalışır.
Tamamen tarayıcınızda çalışır — girdiğiniz hiçbir şey yüklenmez veya saklanmaz.
Sık sorulan sorular
CSS animasyonu nasıl oluşturulur?
Hareketi bir @keyframes kuralında tanımlayın, ardından animation: name duration timing iteration ile öğeye bağlayın. Oluşturucu ikisini de sizin için yazar.
CSS transition ile animation arasındaki fark nedir?
Transition'lar, hover gibi bir özellik değiştiğinde iki durum arasında geçiş yapar. Animation'lar keyframe kullanır, otomatik çalışabilir ve döngüye girebilir.
Bir animasyonu nasıl sonsuz döngüye alırım?
Tekrar sayısını infinite yapın; örneğin animation: spin 1s linear infinite.
CSS animasyonları erişilebilirliği etkiler mi?
Büyük veya sürekli hareket bazı kullanıcıları rahatsız edebilir. Zorunlu olmayan animasyonları @media (prefers-reduced-motion: no-preference) içine alın.