CSS Animasyon Oluşturucu
16 hazır ayarla CSS animasyonları oluşturun. Süre ve zamanlama özelleştirin.
Animasyon Özellikleri
CSS kodu
CSS Animasyon Oluşturucu
Görsel oluşturucumuzla anında CSS animasyonları oluşturun. 16 hazır ayar dahil.
Popüler Araçlar
CSS Animasyon Oluşturucu Hakkında
Aralarında bounce, shake, pulse, fade, slide, rotate, flip, swing, rubber band, jello, heartbeat, flash ve zoom da bulunan on altı hazır keyframe efekti burada süre, gecikme, tekrar sayısı, yön, zamanlama fonksiyonu ve dolgu modu için kaydırıcılar ve menülerle ayarlanır. Bir önizleme karesi, her değeri değiştirdikçe sonucu yeniden oynatır. Çıktı bölmesi, kendi verdiğiniz animasyon adı altında eksiksiz @keyframes kuralını ve animation kısayolunu, bir stil dosyasına kopyalanmaya hazır biçimde verir.
Kullanım alanları
Nasıl kullanılır
Üstteki hazır efekt tablosundan bir efekt seçin: Bounce, Shake, Pulse, Fade In, Slide In Left, Rotate, Flip, Swing, Jello, Heart Beat, Zoom In ve daha fazlası.
Önizleme panelindeki mor karenin efekti tekrar tekrar oynatmasını izleyin, ardından Duration ve Delay kaydırıcılarını sürükleyerek zamanlamayı saniye cinsinden ayarlayın.
Iteration Count değerini 1, 2, 3, 5 veya Infinite olarak, Direction değerini de Normal, Reverse, Alternate ya da Alternate Reverse olarak seçin.
Timing Function seçeneğini - Ease, Ease In, Ease Out, Ease In Out, Linear, Step Start veya Step End - ve Fill Mode seçeneğini None, Forwards, Backwards ya da Both olarak belirleyin.
Animation Name kutusunda keyframe adını değiştirin; böylece kural, sitenizde hâlihazırda bulunan CSS ile çakışmaz.
Kod panelinin üstünde gösterilen tek satırlık kısa yazımı alın veya Copy düğmesine basarak @keyframes bloğunun tamamını ve .animated-element kuralını kopyalayın.
Profesyonel İpuçları
- İçeriğinizi doğrudan yapıştırın; CSS Animasyon Oluşturucu yaygın girdi biçimlerini algılar ve mantıklı varsayılanları otomatik olarak uygular.
- CSS Animasyon Oluşturucu içinde işinizi hızlandırmak için klavye kısayollarını kullanın (tümünü seçmek için Ctrl/Cmd+A, kopyalamak için Ctrl/Cmd+C).
- Çok büyük girdileri parçalara bölün; çoğu tarayıcı sekmesi megabaytlarca metni kaldırabilir, ancak devasa verileri ayrıştırmak arayüzü kısa süreliğine dondurabilir.
- CSS Animasyon Oluşturucu girdilerinizi kaydetmez ve saklamaz. Geçmişe ihtiyacınız varsa önemli çıktıları yerel bir dosyaya veya not uygulamasına kopyalayın.
- Tarayıcınızdan çıkmadan uçtan uca veri akışları kurmak için CSS Animasyon Oluşturucu aracını sitedeki diğer araçlarla (biçimlendiriciler, dönüştürücüler, kodlayıcılar) birlikte kullanın.
Sık Sorulan Sorular
Evet, tamamen ücretsiz: kayıt yok, API anahtarı yok, filigran yok, kullanım sınırı yok.
Hayır. CSS Animasyon Oluşturucu tamamen tarayıcınızda, istemci tarafında çalışır. Girdiğiniz veriler sunucularımıza hiç ulaşmaz.
Kesin bir sınır yok, ancak cihazınızın belleğine bağlı olarak birkaç megabaytı aşan girdilerde yavaşlama yaşayabilirsiniz.
Evet. CSS Animasyon Oluşturucu ile ürettiğiniz çıktıları kişisel veya ticari her projede dilediğiniz gibi kullanabilirsiniz.
İşlemlerin büyük bölümü istemci tarafındaki JavaScript ile yürütülür; bu nedenle sayfa bir kez yüklendikten sonra çoğu zaman internet bağlantısı olmadan çalışmaya devam edebilirsiniz.
Yok. CSS Animasyon Oluşturucu tarayıcınızda çalıştığı için API anahtarı veya kısıtlama olmadan, donanımınızın elverdiği kadar çok girdi işleyebilirsiniz.