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

FPS Sayacı

requestAnimationFrame ile tarayıcı FPS değerini ölçün: yumuşatma, en düşük ve en yüksek kare hızı, uyarı eşiği ve isteğe bağlı grafik. Yerel çalışır, yükleme ve API yoktur.

Dosya Boyutu Dönüştürücü

Bayt, KB, MB, GB, TB ve ikili IEC birimleri (KiB, MiB, GiB, TiB) arasında, ondalık ve ikiliyi dilediğiniz gibi birleştirerek dönüşüm yapın.

Telefon numarası doğrulayıcı

Telefon numarasının ülkeye göre yapısını denetleyin; bölge, tür, E.164, uluslararası, ulusal ve RFC 3966 biçimlerini görün.

Kurgusal telefon numarası oluşturucu

Beş ülkede resmen ayrılmış aralıklardan 50 adede kadar kurgusal numara üretin.

Rastgele adres oluşturucu

Arayüz maketleri ve testler için üç basitleştirilmiş biçimde 1–20 adres benzeri kayıt oluşturun.

CSS Fiyat Tablosu Oluşturucu

HTML + CSS ile tek bir fiyat kartı oluşturun: paket adı, fiyat ve marka vurgu rengi. Kodu açılış sayfanıza kopyalayın.

Araç diğer dillerde mevcuttur