CSS Animasyon Oluşturucu
CSS animasyonlarını (@keyframes) sezgisel olarak oluşturun.
12 önayar, parametre ayarı ve gerçek zamanlı önizlemeyi destekler.
Animasyon Ayarları
CSS Kodu Çıktısı
CSS Animasyon Oluşturucu Hakkında
Bu "CSS Animasyon Oluşturucu", CSS @keyframes kullanarak animasyon hareketlerini görsel olarak kontrol etmenizi ve gerekli CSS kodunu otomatik olarak oluşturmanızı sağlayan ücretsiz bir araçtır. Fade-in, slide, scale ve bounce gibi 12 tür temel animasyon (önayar) içerir.
Süre (saniye), Gecikme, Easing, Tekrar ve Dolgu Modu (Fill Mode) gibi özellikleri kaydırıcılar ve seçim kutularını kullanarak sezgisel olarak ayarlayabilir ve bunları önizleme alanında gerçek zamanlı olarak kontrol edebilirsiniz.
Ayarladıktan sonra, oluşturulan CSS kodunu kopyalayın ve doğrudan projenize yapıştırın. Tüm işlemler tarayıcınızın içinde yapılır ve harici sunucularla hiçbir iletişim yoktur, bu nedenle güvenle kullanabilirsiniz.
CSS Animasyonları Oluşturma Adımları
Temel Hareketi Seçin
Öncelikle "Solma" veya "Kayma" gibi sekmeleri değiştirin ve oluşturmak istediğiniz animasyona yakın bir önayar seçin.
Parametreleri Ayarlayın
Kaydırıcılar ile süreyi, gecikmeyi ve hızlandırma (easing) hızını değiştirin ve sağdaki önizleme alanında gerçek hareketi kontrol edin.
CSS Kodunu Kopyalayın
Hareket tamamlandığında, çıktı alanındaki "Kodu Kopyala" düğmesine tıklayın ve CSS dosyanıza yapıştırın.
CSS Animasyon Sözlüğü (Özellikler Rehberi)
animation-duration(Duration)- Animasyonun bir tekrarı için oynatma süresini (tamamlanma süresini) belirler. Saniye (s) veya milisaniye (ms) cinsinden belirtilir.
animation-timing-function(Easing)- Animasyonun hız eğrisini (ivmelenme/yavaşlama) belirler. Sabit hız için "linear" ve aşamalı bir başlangıç ve bitiş için "ease-in-out" örnek olarak verilebilir.
animation-delay(Delay)- Animasyon başlamadan önceki bekleme süresini (gecikme) belirler.
animation-iteration-count(Iterations)- Animasyonun kaç kez tekrarlanacağını belirler. "infinite" olarak belirlemek onu sonsuza kadar döngüye sokar.
animation-direction(Direction)- Animasyonun oynatma yönünü belirler. Geriye doğru oynatma için "reverse" ve tek sayıların ileri, çift sayıların geri gittiği "alternate" örnek olarak verilebilir.
animation-fill-mode(Fill Mode)- Animasyon çalışmadan önce ve sonra elemanın stilinin (durumunun) nasıl korunacağını belirler. "forwards" olarak ayarlamak, animasyonun sonundaki stili korur.
transition-property(Property)- transition を適用するプロパティ名 (例: transform, opacity, all)。
transition-duration(Duration)- transition が完了するまでの時間。
transition-timing-function(Easing)- transition の速度変化のカーブ (Easing)。
CSS Animasyonları Hakkında Sıkça Sorulan Sorular (SSS)
- Q.CSS animasyon ve geçiş (transition) arasındaki fark nedir?
transition, bir değişikliğin (örn. hover) tetiklediği iki durum arasında ara değer bulur.animationbir tetikleyici olmadan otomatik olarak oynatılabilir ve @keyframes kullanarak ara durumların ince taneli olarak belirlenmesini sağlar.- Q.Hangi animasyonlar en iyi performansı gösterir?
transform(translate, scale, rotate) veopacitykullanan animasyonlar donanım hızlandırması nedeniyle hızlıdır.width,heightveyamarginüzerindeki animasyonlar tarayıcının yeniden akışına (reflow) neden olur ve daha yavaştır.- Q.prefers-reduced-motion nedir?
- Animasyonlardan dolayı mide bulantısı yaşayan kullanıcılar için bir medya sorgusudur (media query). Erişilebilirlik amacıyla bunları devre dışı bırakmak veya azaltmak için
@media (prefers-reduced-motion: reduce)kullanılması önerilir. - Q.animation-fill-mode forwards zorunlu mu?
- Fade-in gibi animasyonlar için,
forwardsbelirtmezseniz, eleman sonunda orijinal durumuna (örn. opacity: 0) geri dönecektir. Ekranda son karenin stilini korumak istiyorsanız zorunludur. - Q.Verilerim bir sunucuya gönderiliyor mu?
- Hayır. Tüm işlemler tarayıcınızda yerel olarak tamamlanır ve dışarıya hiçbir veri gönderilmez.
CSS Animasyonları için Kullanım Durumları
Sayfa Yükleme Animasyonları
Sayfanın ilk izlenimini iyileştirmek için içeriğin yumuşak bir şekilde göründüğü bir fade-in veya aşağıdan bir slide-in uygulayın.
Düğmeleri ve CTA'ları Vurgulama
Kullanıcının bakışını doğal olarak yönlendirmek için dönüşüm düğmelerine pulse (nabız) veya bounce (zıplama) gibi animasyonlar uygulayın.
Kaydırma Tabanlı Animasyonlar
Bir eleman ekrana girdiği anda oynatılan efektler oluşturmak için Intersection Observer API'sini oluşturulan CSS animasyon sınıflarıyla birleştirin.
Yükleme/Bekleme Arayüzleri
Veri çekerken veya form gönderirken geri bildirim olarak sonsuz dönen veya yanıp sönen yükleme animasyonları uygulayın.
Geri Bildirim Gönder
Aracı geliştirmemize yardımcı olmak için lütfen düşüncelerinizi bize bildirin.
Geri bildirim geçici olarak askıya alındı
Sunucu meşgul veya spam koruması etkin. Lütfen daha sonra tekrar deneyin.