Ana içeriğe geç
Uddatak

CSS Keyframe Animasyon Oluşturucu

CSS Keyframe Animasyon Oluşturucu, 12 hazır stilden bir animasyon türü seçmenizi sağlar (belirme/kaybolma, dört yönden kayma, yakınlaştırma/uzaklaştırma, zıplayarak girme, döndürerek girme, X veya Y ekseninde çevirme), ardından süre, gecikme, zamanlama fonksiyonu ve tekrar sayısını canlı önizleme ve Tekrar Oynat düğmesiyle ayarlamanızı sağlar. Tam @keyframes kuralını ve kullanıma hazır bir animasyon sınıfını kopyalayın. Tüm oluşturma işlemi tarayıcınızda gerçekleşir — hiçbir şey sunucuya gönderilmez.

Tasarım ve CSS Araçları Tamamen tarayıcınızda çalışır

Kod tamamen tarayıcınızda oluşturulur — hiçbir şey sunucuya gönderilmez.

CSS kodu

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

.animated-box {
  animation: uddatakAnim 800ms ease-out 0ms 1;
}

Sıkça Sorulan Sorular

Evet, @keyframes ve animation özelliği özel bir tarayıcı ön eki gerektirmeden her modern tarayıcıda desteklenir.

Bununla devam edin

Tamamen yerel

Cubic Bezier Hızlanma Eğrisi Oluşturucu

Özel bir hareket hızlanma eğrisi tasarlamak için iki noktayı sürükleyin ve cubic-bezier kodunu kopyalayın.

Tasarım ve CSS AraçlarıAracı aç
Tamamen yerel

CSS Gradyan Oluşturucu

Görsel olarak doğrusal veya radyal bir CSS gradyanı oluşturun ve kodu kopyalayın.

Tasarım ve CSS AraçlarıAracı aç
Tamamen yerel

CSS Clip-Path Oluşturucu

Hazır bir şekil seçin (daire, üçgen, yıldız, mesaj balonu...) ve clip-path CSS kodunu kopyalayın.

Tasarım ve CSS AraçlarıAracı aç

İlgili araçlar

Tamamen yerel

Renk Paleti Uyum Oluşturucu

Bir ana renk seçin ve uyumlu bir renk paleti elde edin (tamamlayıcı, benzer, üçlü, dörtlü, tek renkli).

Tasarım ve CSS AraçlarıAracı aç
Tamamen yerel

Mesh Gradyan Oluşturucu

Tek tıkla yumuşak, çok noktalı bir mesh gradyan arka planı oluşturun ve kullanıma hazır CSS kodunu kopyalayın.

Tasarım ve CSS AraçlarıAracı aç
Tamamen yerel

Renk Kontrastı Denetleyici

Bir metin/arka plan renk çiftinin WCAG erişilebilirlik kontrast standartlarını karşılayıp karşılamadığını kontrol edin.

Tasarım ve CSS AraçlarıAracı aç
Tamamen yerel

CSS Gradyan Oluşturucu

Görsel olarak doğrusal veya radyal bir CSS gradyanı oluşturun ve kodu kopyalayın.

Tasarım ve CSS AraçlarıAracı aç
Tamamen yerel

CSS Box-Shadow Oluşturucu

Kaydırıcılarla görsel olarak bir CSS box-shadow tasarlayın ve oluşturulan kodu kopyalayın.

Tasarım ve CSS AraçlarıAracı aç

Uddatak'i denemeye hazır mısınız?

Tüm araç kütüphanesine göz atın ve ihtiyacınız olanı hemen şimdi kullanmaya başlayın — ücretsiz, kayıt gerekmez.

Tüm araçlara göz atın