CSS Animasyon Oluşturucu Önceden tanımlanmış efektler ve özelleştirilebilir zamanlama ile CSS anahtar kare animasyonları oluşturun.

🎨

CSS Animasyon Oluşturucu

Önceden tanımlanmış efektler ve özelleştirilebilir zamanlama ile CSS anahtar kare animasyonları oluşturun.

Bir animasyon önceden ayarlanmış seçeneğini seçin

Seçilen seçeneklerden bounce, fade, slide, spin, shake, pulse veya flip animasyonlarını kullanabilirsiniz.

Zamanlamayı özelleştirin

Süre, zamanlama fonksiyonu, gecikme, tekrarlanma sayısı ve yönü ayarlayabilirsiniz.

CSS'yi kopyalayın

Canlı öğeyi önizleyin ve anahtar çerçeveleri ve animasyon CSS'sini kopyalayın.

Loading tool...

What Is CSS Animasyon Oluşturucu?

CSS Animasyon Oluşturucu, önceden tanımlanmış efektler kütüphanesi ve zamanlama özelleştirmesiyle birlikte anahtar çerçeveli CSS animasyonları oluşturmanıza yardımcı olur. CSS animasyonları, web sayfalarını hareketlendirerek, dönüştürerek ve zaman içinde elemanları geçişlere sokarak canlandırır. Bu araç, her biri düzgün bir şekilde tanımlanmış @keyframes ile birlikte sekiz popüler animasyon önceden ayarını sunar: bounce, fade, slide, spin, shake, pulse ve flip. Animasyonun her yönünü özelleştirebilirsiniz: süre, her döngünün ne kadar sürdüğünü kontrol eder, zamanlama fonksiyonu hız eğrisini ayarlar, gecikme animasyonu başlamadan önce bir duraklama ekler, yineleme sayısı kaç kez çalındığını belirler, yön oynatma sırasını kontrol eder ve doldurma modu animasyon öncesi ve sonrası eleman durumunu tanımlar. Canlı ön izleme, animasyonu eylemde gösterir.

Why Use CSS Animasyon Oluşturucu?

Hazır olarak kullanılabilen yedi popüler animasyon önceden ayarlanmış seçeneği
Süre, zamanlama, gecikme ve tekrarlanma üzerinde tam kontrol
Animasyon yönü ve doldurulma modu kontrolleri
Oluşturulan CSS, tam @keyframes tanımlarını içerir

Common Use Cases

Giriş Animasyonları

Öğeleri görüntüleme alanına girdiklerinde canlandırarak etkileşimli kullanıcı deneyimleri oluşturun.

Yükleniyor Göstergeleri

Pulse, spin veya bounce efektleriyle animasyonlu yükleme durumları oluşturun.

Dikkat Çekme

Önemli öğelere dikkat çekmek için shake veya pulse kullanın.

Sayfa Geçişleri

Pürüzsüz sayfa veya bölüm geçişleri için slide ve fade animasyonları ekleyin.

Technical Guide

CSS animasyonları, @keyframes kurallarıyla birlikte animation kısaltma özelliğini kullanır. Animasyon özelliği şunları birleştirir: animation-name (@keyframes kuralına referans), animation-duration, animation-timing-function (ease, linear, ease-in, ease-out, ease-in-out veya özel cubic-bezier), animation-delay, animation-iteration-count (sayı veya sınırsız), animation-direction (normal, reverse, alternate, alternate-reverse), animation-fill-mode (none, forwards, backwards, both) ve animation-play-state (running, paused). @keyframes kuralı, animasyon aşamalarını yüzdelerle (0% ile 100%) veya from/to anahtar kelimeleriyle tanımlar. Performans için, możli olduğunda yalnızca transform ve opacity özelliklerini canlandırın, çünkü bunlar GPU hızlandırmasıyla çalışabilir. Genişlik, yükseklik, kenar boşluğu ve dolgu gibi diğer özellikleri düzenlemek, layout yeniden hesaplamalarına neden olur. Gelecek animasyonlar hakkında tarayıcıya ipucu vermek için will-change özelliğini kullanın.

Tips & Best Practices

1
Animasyonun son durumunu koruması için animation-fill-mode: both kullanın
2
Performans için yalnızca transform ve opacity özellikleri üzerinde animasyon yapın
3
Erişilebilirlik için prefers-reduced-motion medya sorgusunu ekleyin
4
Doğal ileri-geri animasyonlar için alternatif yönü kullanın

Related Tools

CSS Döner Oluşturucu

Özelleştirilebilir stillerle CSS yükleniyor animasyonları ve dönen yükleyiciler oluşturun.

🎨 CSS & Design

CSS Dönüşüm Oyun Alanı

Dönme, ölçekleme, eğme ve çevirme dahil CSS dönüşümleri ile 3B perspektif deneyimi yaşayın.

🎨 CSS & Design

CSS Geçiş Jeneratörü

Özellik, süre, yumuşatma ve hover efektleri ile özelleştirilebilir CSS geçişleri oluşturun.

🎨 CSS & Design

CSS Kenar Yuvarlaklık Oluşturucu

Her köşe için ayrı kontrol ve görsel önizleme ile CSS kenar yuvarlaklık değerleri oluşturun.

🎨 CSS & Design

Frequently Asked Questions

Q Animasyon ve geçiş arasındaki fark nedir?

Geçişler bir tetikleyici (örneğin hover) gerektirir ve iki durum arasında animasyon yapar. Animasyonlar otomatik olarak çalışabilir ve birden fazla anahtar çerçeve aşamasına sahiptir.

Q Birden çok animasyonu zincirleyebilir miyim?

Evet, animation özelliğinde virgülle ayrılmış değerleri kullanın veya bunları sıralamak için animation-delay'yi kullanın.

Q Bir animasyonu nasıl durdurabilirim?

Animasyonu durdurmak için animation-play-state: paused ayarlayın ve devam ettirmek için running ayarlayın.

Q animation-fill-mode ne yapar?

Öğenin animasyon öncesi ve sonrası durumunu tanımlar. forwards, son durumu korur; backwards ise gecikme sırasında ilk anahtar çerçevesini uygular.

Q CSS animasyonları erişilebilir mi?

Harekete karşı duyarlı olan kullanıcılar için alternatifler sunmak amacıyla prefers-reduced-motion medya sorgusunu kullanın.

About This Tool

CSS Animasyon Oluşturucu is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.