Softonic

CSS Animasyon Oluşturucu

Adım 1 / 2
Hazır ayar
Sonraki

@keyframes yazmayı sıfırdan yapmak yorucudur: yüzdeleri seçer, özellikleri tahmin eder, yeniden yüklersiniz, izlersiniz, ayarlarsınız. Bu oluşturucu altı hazır animasyon sunar (fade, slide up, bounce, spin, pulse ve shake) ve animasyon adını, süreyi, easing’i, tekrar sayısını ve yönü ayarlamanıza olanak tanır. Sonuç gerçek zamanlı oynatılır ve memnun kaldığınızda üretilen @keyframes bloğunu ve animation kısa yazımını kopyalayabilirsiniz.

CSS animasyonu nasıl oluşturulur?

  1. 1

    Bir ön ayar seçin

    Altı yerleşik animasyondan birini seçin: fade, slide up, bounce, spin, pulse veya shake.

  2. 2

    Animasyonu adlandırın

    Keyframes'e geçerli bir CSS tanımlayıcısı verin, örn. `cardIn` veya `fadeIn`. Aynı ad `animation` kısa yazımında da kullanılır.

  3. 3

    Zamanlamayı ve tekrarı ayarlayın

    Saniye cinsinden süre, easing (ease, ease-in, ease-out, ease-in-out, linear veya spring), tekrar sayısı (1, 2, 3 veya infinite) ve yön (normal, reverse, alternate veya alternate-reverse).

  4. 4

    CSS'i kopyalayın

    Üretilen `@keyframes` kuralı ve `animation:` kısa yazımı, stil sayfanıza yapıştırılmaya hazır.

Animasyon anatomisi

@keyframes slide-in {
  0%   { transform: translateX(-100%); opacity: 0; }
  60%  { transform: translateX(10%);   opacity: 1; }
  100% { transform: translateX(0);     opacity: 1; }
}

.card {
  animation: slide-in 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

Kısa yazımda sekiz özellik: animation-name duration timing-function delay iteration-count direction fill-mode play-state.

Easing seçenekleri

Oluşturucu altı easing işlevi sunar:

Easing cubic-bezier() Hissiyat
linear yok Sabit hız
ease-in 0.42, 0, 1, 1 Yavaş başlangıç, hızlı bitiş
ease-out 0, 0, 0.58, 1 Hızlı başlangıç, yavaş bitiş
ease-in-out 0.42, 0, 0.58, 1 Yavaş-hızlı-yavaş
ease (varsayılan) 0.25, 0.1, 0.25, 1 Yumuşak varsayılan
spring 0.68, -0.55, 0.27, 1.55 Hedefi aşıp yerine oturur

Doğru özellikleri canlandırın

Tarayıcı her özelliği canlandırabilir, ancak yalnızca birkaçı layout veya boyama tetiklemeden GPU'da akıcı çalışır:

Ucuz (yalnızca composite): transform, opacity, filter.

Pahalı (layout/boyama): width, height, top, left, margin, padding, background-color.

width ve top üzerinde saniyede altmış karelik animasyonlar küçük öğelerde mümkündür, ancak aynı anda çok sayıda canlandırırsanız mobilde takılır. Karmaşık hareket için her zaman top / left yerine transform: translate(...) ve animasyonlu genişlik/yükseklik yerine transform: scale(...) tercih edin.

will-change: ölçülü kullanın

Tarayıcıya bir composite katmanını önceden ayırmasını söylemek akıcılığa yardımcı olabilir:

.card { will-change: transform; }

Ancak bellek tüketir. Animasyon tetiklenmeden hemen önce uygulayın ve bitince kaldırın. Birçok öğeye kalıcı olarak will-change: transform koymak yarardan çok zarar getirebilir.

Azaltılmış hareket

Bazı kullanıcılar harekete duyarlıdır ve işletim sistemi tercihlerini ayarlar:

@media (prefers-reduced-motion: reduce) {
  .card {
    animation: none;
  }
}

Bu ayara saygı gösterin. Yedek olarak anında bir durum değişikliği veya çok hafif bir fade sunun.

Sık Sorulan Sorular

Basit, bildirimsel ve tek seferlik hareket için CSS. JavaScript güdümlü zamanlama, dinamik keyframes, duraklatma ve oynatma kontrolü için Web Animations API (element.animate()). İkisi de kompozitörde çalışır; hiçbiri doğal olarak daha hızlı değildir.

Neredeyse her zaman transform yerine layout tetikleyen bir özelliği (width, top, margin) canlandırdığınız için. translate() ve scale() kullanın, takılma genellikle kaybolur.

Evet, animation: a 1s, b 1s 1s, c 1s 2s; üç animasyonu kademeli gecikmelerle sırayla çalıştırır. Bu oluşturucu tek bir animasyon üretir, bu yüzden ek girdileri kısa yazıma kendiniz ekleyin. Daha karmaşık koreografi için Web Animations API veya GSAP gibi bir kütüphane kullanın.

Öğenin animasyon başlamadan önce (gecikme sırasında) from durumunu almasını ve animasyon bittikten sonra to durumunu korumasını sağlar. both olmadan öğe, animasyon bitince başlangıçtaki stiline döner. Oluşturucu kısa yazımı minimumda tutar; gerekirse fill mode’u kendiniz ekleyin.

İlgili Araçlar

ASCII Tablosu Referansı

NUL, LF ve DEL dahil her kod için ondalık, onaltılık, sekizlik ve ikili değerlerle HTML sayısal karakter başvurusu gösterimini sunan tam ASCII tablosu.

HTML Karakter Referansı

HTML varlıklarının aranabilir listesi; adlandırılmış ve sayısal kodlarıyla birlikte özel karakter ve semboller için tek tıkla kopyalama.

Klavye kısayolları başvurusu

macOS, Windows ve Linux’ta VS Code, Chrome ve GNU Readline kullanan Bash için belgelenmiş varsayılan kısayolları arayın.

EditorConfig Oluşturucu

Girinti stili ve boyutu, satır sonu, karakter kümesi ve boşluk kurallarınızla bir .editorconfig dosyası oluşturarak IDE ve editörler arasında tutarlı biçimlendirme sağlayın.

E-posta Doğrulayıcı

Bir e-posta adresini doğrulayın: RFC 5322 sözdizimi kontrolü, canlı MX kaydı sorgulama, ayrıca yerel kısım, alan adı ve uzunluk bilgileri. Hiçbir e-posta gönderilmez.

Gradyan Duvar Kağıdı Oluşturucu

Dizüstü bilgisayar, telefon veya Zoom arka planları için bulanık üç renkli gradyan duvar kağıtları oluşturun. Açıyı ve bulanıklığı rastgele belirleyin ya da elle ayarlayın.

Araç diğer dillerde mevcuttur