CSS Animasyon Oluşturucu
CSS keyframes animasyon kodlarını isim, süre, geçiş eğrisi, yön ve dolgu modu seçenekleriyle çevrim içi oluşturun.
Aracı çalıştır
CSS Animasyon Oluşturucu, web projeleriniz için temel CSS animasyon kodlarını hızlıca hazırlayan pratik bir araçtır. Araç, animasyon adı, süre, geçiş eğrisi (easing), oynatma yönü ve dolgu modu (fill mode) değerlerini tek bir CSS bildirimi ve ilişkili anahtar kare (keyframes) bloğu halinde birleştirir. Varsayılan ayarlarda bir saniyelik fadeIn animasyonu tanımlanır. Bu animasyon öğeyi sıfır opaklık ve yirmi piksel dikey kaydırmadan başlatıp tam görünürlüğe ve orijinal konumuna taşır. Animasyon adı alanını boş bıraktığınızda sistem otomatik olarak myAnimation adını atar. Süre alanına girdiğiniz sayısal değer, üretilen koda saniye cinsinden yansıtılır. Geçiş eğrisi, yön ve dolgu modu alanlarını projenizin tasarım ihtiyacına göre serbestçe belirleyebilirsiniz. Üretilen CSS kodunu doğrudan stil dosyanıza veya HTML içi stil etiketlerine yapıştırarak kullanabilirsiniz. Sayfa içi geçişler, kart açılışları ve dinamik kullanıcı arayüzü bileşenleri için gereken standart CSS kurallarını elle yazmadan anında elde edebilirsiniz.
Kullanım
- İsteğe bağlı olarak animasyon adı alanına özel bir isim yazın veya varsayılan değeri koruyun.
- Animasyon süresini saniye cinsinden sayı olarak belirleyin.
- Geçiş eğrisi, oynatma yönü ve dolgu modu değerlerini arayüzden ayarlayın.
- Oluştur butonuna tıklayarak CSS kod çıktısını alın.
- Hazırlanan CSS kurallarını kopyalayarak web sayfanızın stil dosyasına ekleyin.
Örnekler
- Animasyon adı: slideUp, Süre: 2, Geçiş eğrisi: ease-in-out, Yön: alternate, Dolgu modu: forwards girildiğinde iki saniyelik ileri geri geçiş kuralı üretilir.
- Tüm alanlar varsayılan bırakıldığında fadeIn adlı, bir saniye süreli ve sıfırdan yüzde yüze opaklık artı dikey kaydırma içeren standart CSS animasyon kodu hazırlanır.
SSS
Animasyon adı belirtmezsem çıktı nasıl oluşur?
Animasyon adı kutusu boş bırakıldığında araç varsayılan olarak myAnimation adını kullanır ve anahtar kare tanımını bu isimle üretir.
Süre değeri hangi birimle işlenir?
Girdiğiniz sayısal süre değeri CSS çıktısında doğrudan saniye (s) birimiyle etiketlenir.
Oluşturulan anahtar kareler hangi özellikleri değiştirir?
Üretilen anahtar kareler başlangıçta öğeyi sıfır opaklık ve 20 piksel dikey öteleme ile başlatır, bitişte ise tam opaklık ve sıfır ötelemeye ulaştırır.