Görsel arayüz ile CSS keyframe animasyonları oluşturun. Süre, gecikme, yön, tekrar ve zamanlama fonksiyonlarını ayarlayın.
@keyframes customAnim { 0% { background-color: #3b82f6; } 50% { transform: scale(1.2); background-color: #8b5cf6; } 100% { background-color: #3b82f6; } } .element { animation: customAnim 1s ease 0s infinite normal none; }
CSS Animation Generator, web sayfalarınız için keyframe tabanlı CSS animasyonları oluşturmanızı sağlayan görsel bir araçtır. Animasyon süresini, gecikmesini, yönünü, tekrar sayısını ve zamanlama fonksiyonunu kolayca ayarlayabilirsiniz. Her bir keyframe için transform (translateX, translateY, rotate, scale), opacity ve background-color gibi özellikleri düzenleyebilirsiniz. Oluşturulan CSS kodunu doğrudan projelerinize kopyalayıp kullanabilirsiniz.
Öncelikle animasyon ayarlarını (süre, gecikme, yön vb.) belirleyin. Ardından keyframe düzenleyicisinden her bir noktadaki transform, opacity ve renk değerlerini ayarlayın. Canlı önizleme alanında animasyonunuzu gerçek zamanlı görebilirsiniz. Hazır presetlerden birini seçerek hızlı bir başlangıç yapabilir, ardından ihtiyacınıza göre özelleştirebilirsiniz. Sonucu "Kopyala" butonuyla panoya alın.
Transform ve opacity özellikleri GPU hızlandırmalıdır ve performans açısından en verimli seçeneklerdir. Width, height veya margin gibi layout tetikleyen özelliklerden kaçınılmalıdır.
Fill-mode, animasyon başlamadan önce veya bittikten sonra elemanın stilini kontrol eder. "forwards" animasyon bittiğinde son keyframe stilini korur, "backwards" başlamadan önce ilk keyframe stilini uygular, "both" ise her iki durumu da kapsar.
JavaScript ile elemanın animation-play-state özelliğini "paused" yaparak veya CSS sınıfını kaldırarak animasyonu durdurabilirsiniz.