CSS Animasyon Üretici

Bu araç ne işe yarar?

CSS Animasyon Üreticisi, hazır preset'lerle keyframe tabanlı animasyonları görsel olarak oluşturmanızı sağlar. fadeIn, slideUp, bounceIn, shake, pulse, rotate gibi efektleri seçer; süre, gecikme, zamanlama eğrisi, tekrar sayısı, yön ve fill-mode değerlerini ayarlar ve canlı önizlemeyi izlersiniz. Üretilen @keyframes ve animation kodunu tek tıkla kopyalarsınız.

Nasıl kullanılır?

Değerleri ve seçenekleri ayarlayın.
Canlı önizlemede sonucu görün.
Üretilen CSS/kodu projenize kopyalayın.

Preset'ler ve canlı önizleme

Araç dokuz hazır animasyon sunar: fadeIn ve slideUp giriş efektleri için, bounceIn ve wobble dikkat çekmek için, shake ve flash hata uyarıları için, pulse, rotate ve slideLeft ise vurgular için idealdir. Bir preset'e tıkladığınızda ortadaki kutu animasyonu gerçek zamanlı oynatır, böylece kodu sayfanıza eklemeden sonucu görürsünüz. Her ayar değişikliğinde önizleme yeniden başlar.

Zamanlama parametrelerini ayarlama

Süre (0,1-10 sn) ve gecikme alanlarının yanında zamanlama fonksiyonunu ease, linear, ease-in-out veya yaylanma için cubic-bezier(0.68,-0.55,0.27,1.55) olarak seçebilirsiniz. Iteration'ı 'infinite' yaparak sürekli dönen yükleyiciler, direction'ı 'alternate' seçerek ileri-geri salınan efektler oluşturursunuz. fill-mode 'forwards' animasyon bittiğinde son kareyi koruyarak öğenin geri sıçramasını önler.

Sıkça sorulan sorular

Kendi keyframe'lerimi düzenleyebilir miyim?

Araç dokuz preset arasından seçim yaptırır ve onların @keyframes kurallarını üretir. Çıktıyı kopyaladıktan sonra CSS dosyanızda keyframe yüzdelerini ve transform değerlerini istediğiniz gibi elle değiştirebilirsiniz.

Animasyonu sonsuza kadar döndürmek için ne yapmalıyım?

Iteration menüsünden 'infinite' seçin. rotate veya pulse gibi bir preset ile birleştirildiğinde bu, yükleme göstergeleri ve nabız efektleri için ideal sürekli döngü oluşturur.