Üretici

CSS Animasyon Oluşturucu

Canlı önizleme, hazır efektler, zamanlama kontrolleri ve anında kod çıktısı ile görsel olarak CSS animasyonları oluşturun.

Canlı Önizleme

Arka Plan Rengi

#6366f1

W: 80px

H: 80px

Köşe Yarıçapı: 12px

Animasyon Adı

@keyframes adı ve animasyon özelliği tanımlayıcısı olarak kullanılır.

Sure: 1s

Gecikme: 0s

Zamanlama Fonksiyonu

Tekrar Sayısı

Yon

Doldurma Modu

Tarayıcı Ön Ekleri(-webkit-, -moz-)

Solma

Ölçek

Kayma

Özel

Dikkat

Tailwind Karşılığı

animate-in fade-in

Tailwind CSS v3+ ve animate eklentisi veya tailwindcss-animate gerektirir.

Oluşturulan CSS

@keyframes myAnimation {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

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

/* Respect user motion preference */
@media (prefers-reduced-motion: reduce) {
  .element {
    animation: none;
  }
}

CSS Animasyon Oluşturucu Hakkında

CSS animasyon oluşturucu, sıfırdan kod yazmadan CSS @keyframes animasyonları oluşturmanızı ve özelleştirmenizi sağlar. Hazır animasyonlar (kararma, kaydırma, zıplama vb.) arasından seçim yapın, zamanlama, süre ve yineleme ayarlarını düzenleyin, gerçek zamanlı önizleyin ve oluşturulan CSS'yi doğrudan projenize kopyalayın.

Tüm Üretici araçlarına göz at

Nasıl Kullanılır

Galeriden hazır bir animasyon seçin veya özel keyframe'ler yazın. Kontrolleri kullanarak süreyi, gecikmeyi, zamanlama fonksiyonunu ve yineleme sayısını ayarlayın. Canlı önizlemenin anında güncellenmesini izleyin. Önizleme öğesinin görünümünü kullanım durumunuza uyacak şekilde özelleştirin. Stil sayfanıza yapıştırmaya hazır tam animasyon kodunu almak için CSS'yi Kopyala'ya tıklayın.

Yaygın Kullanım Alanları

Arayüz bileşenleri için giriş ve çıkış animasyonları oluşturma
Yükleme göstergeleri ve dikkat çekme efektleri oluşturma
Butonlara, kartlara ve bildirimlere mikro etkileşimler ekleme
Görsel geri bildirimle CSS animasyon sözdizimini öğrenme
Müşteri sunumları için animasyon fikirlerini hızlıca prototipleme

CSS Animasyon Oluşturucu Nasıl Kullanılır Bir mola verin ve ücretsiz tarayıcı oyunları oynayın

Tüm Gönderiler

c/tools_css-animation-generator0

Tümünü Gör Gönderi Oluştur