TL
Tool Lab
💰Donate
💰Donate

CSS Animation Generator

Build CSS keyframe animations with live preview.

Box
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 1s ease 0s 1 normal both;
}

Bu araç hakkında

CSS Animasyon Oluşturucu, keyframe presetleri, zamanlama, süre, gecikme ve tekrar ayarlarını yapılandırarak akıcı CSS animasyonları oluşturur. Canlı önizleme animasyonu gösterir.

transform ve opacity kullanan CSS animasyonları GPU'da birleştirildiğinden layout veya repaint tetiklemediği için performans açısından verimlidir.

Nasıl kullanılır

  1. Açılır menüden bir animasyon türü seçin.
  2. Süreyi ayarlayın (örn. 0.5s, 2s).
  3. Easing'i kontrol etmek için bir zamanlama fonksiyonu seçin.
  4. İsteğe bağlı olarak animasyon başlamadan önce gecikme ayarlayın.
  5. Tekrar sayısını ayarlayın (sayı veya infinite).
  6. Önizleme için Tekrar Oynat'a, ardından CSS'yi dışa aktarmak için Kopyala'ya tıklayın.

Kullanım senaryoları

Front-end geliştiriciler içerik yüklerken algılanan performansı artırmak için fade ve slide animasyonları kullanır. UI tasarımcıları düğme nabzı gibi mikro etkileşimler prototipler.

Sık sorulan sorular

  • fill-mode: both nedir? — Animasyon başlamadan önce başlangıç stillerini uygular ve bittikten sonra bitiş stillerini korur. En kullanışlı ayardır.
  • Animasyonu sonsuza kadar döngüde tutmak nasıl? — Tekrar sayısını infinite olarak ayarlayın.
  • CSS animasyonları JavaScript'ten daha iyi mi? — Basit efektler için CSS animasyonları tercih edilir. Karmaşık sıralama için JavaScript daha fazla kontrol sunar.