CSS Animasyon Oluşturucu
Görsel zaman çizelgesi düzenleyicisiyle CSS keyframe animasyonları oluşturun
Animasyon ayarları
Animasyon ön ayarları
Anahtar kareler
0% → 100%
Anahtar kare · 0%
Anahtar kare · 100%
Canlı önizleme
Oluşturulan CSS
@keyframes myAnimation {
0% {
opacity: 1;
}
100% {
opacity: 1;
}
}
.animated-element {
animation-name: myAnimation;
animation-duration: 1s;
animation-timing-function: ease;
animation-iteration-count: 1;
animation-direction: normal;
animation-fill-mode: none;
animation-delay: 0s;
}Animasyonunuzu denetlemek için anahtar kareleri düzenleyin ve yeniden oynatın.
Hızlı dönüşüm örnekleri
translateX(100px) / translateY(-50px)rotate(45deg) / rotate(360deg)scale(1.5) / scale(0.5)skewX(10deg) veya skewY(-5deg)perspective(400px) ile rotateY(180deg)CSS Animasyon Oluşturucu hakkında
Ücretsiz CSS Animasyon Oluşturucu aracımız, sıfırdan karmaşık kod yazmadan profesyonel anahtar kare animasyonlarını görsel olarak oluşturmanızı sağlar. Süre ve zamanlama işlevlerinden tek tek anahtar kare özelliklerine kadar animasyonunuzun her yönünü ayarlayın ve gerçek zamanlı güncellenen canlı önizlemeyle sonuçları anında görün.
İster hafif bir belirme efekti, dikkat çekici bir zıplama veya özel çok adımlı bir animasyon gerekse de bu araç 10 yerleşik hazır ayar ve tam kapsamlı bir anahtar kare düzenleyici sunar. Her hazır ayar tamamen özelleştirilebilir; böylece bunları başlangıç noktası olarak kullanabilir ve herhangi bir yüzde noktasında transform, opacity ve arka plan rengi dâhil her özelliği hassas biçimde ayarlayabilirsiniz.
Oluşturucu, doğru @keyframes sözdizimi ve ayrı animasyon özellikleriyle temiz, üretimde kullanıma hazır CSS kodu üretir. Oluşturulan kodu kopyalayıp stil sayfanıza yapıştırmanız yeterlidir. Tüm işlemler sunucuya yükleme olmadan tarayıcınızda gerçekleşir; çalışmanız gizli ve güvende kalır.
Temel özellikler
- Her anahtar kare için transform, opacity ve background-color kontrolleri sunan görsel anahtar kare düzenleyici
- 10 hazır animasyon: Zıplama, Belirme, Solma, Soldan kayma, Sağdan kayma, Dönme, Nabız, Sallanma, Çevrilme ve Yakınlaşma
- Animasyonları test etmek için anında tekrar oynatma sunan canlı önizleme paneli
- Süre, zamanlama işlevi, yineleme sayısı, yön, dolgu modu ve gecikme dâhil tam animasyon özelliği kontrolleri
- Hassas yumuşatma eğrileri için özel cubic-bezier zamanlama işlevi desteği
- Herhangi bir yüzde noktasında anahtar kare ekleme ve kaldırma (%0, %25, %50, %75, %100 veya özel)
- Üretimde kullanıma hazır, temiz @keyframes ve ayrı animasyon özelliği CSS çıktısı
- Projelerinize anında entegrasyon için tek tıkla panoya kopyalama
- Düzenli ve anlamlı kod için özel animasyon adlandırma
- Her ortamda rahat düzenleme için tam koyu mod desteği
CSS Animasyon Oluşturucu nasıl kullanılır?
- Bir başlangıç noktası seçin: Zıplama, Belirme veya Dönme gibi 10 yerleşik hazır ayardan birini seçin ya da boş bir animasyonla başlayın.
- Animasyon özelliklerini ayarlayın: Sezgisel kontrollerle süreyi, zamanlama işlevini, yineleme sayısını, yönü, dolgu modunu ve gecikmeyi belirleyin.
- Anahtar kareleri düzenleyin: Herhangi bir yüzde noktasında anahtar kare ekleyin, kaldırın veya değiştirin. Her anahtar kare için transform değerlerini, opaklığı ve arka plan renklerini belirleyin.
- Animasyonunuzu önizleyin: Canlı önizlemenin gerçek zamanlı güncellenmesini izleyin. Animasyonu yeniden başlatıp sonucu doğrulamak için Tekrar oynat'a tıklayın.
- CSS kodunu kopyalayın: Oluşturulan @keyframes ve animasyon özelliği kodunu panonuza kopyalamak için CSS kopyala düğmesine tıklayın.
- Projenize yapıştırın: Kopyalanan CSS kodunu stil sayfanıza ekleyin ve animasyon sınıfını HTML öğelerinize uygulayın.
Kullanım alanları
- Mikro etkileşimler: Kullanıcı katılımını artırmak için hafif üzerine gelme efektleri, düğme animasyonları ve geri bildirim ipuçları ekleyin.
- Yükleme göstergeleri: Yükleme durumları için özel dönen göstergeler, nabız efektleri ve iskelet ekran animasyonları oluşturun.
- Sayfa geçişleri: Kaydırma veya yükleme sırasında hareketlenen sayfa öğeleri için kayarak giriş, belirme ve yakınlaştırma efektleri oluşturun.
- Dikkat çekici efektler: Kullanıcıların dikkatini önemli arayüz öğelerine çekmek için sallanma, zıplama ve nabız animasyonları tasarlayın.
- Tasarım sistemi prototipleri: Ekibinizin bileşen kitaplığında animasyon kalıplarını hızla prototipleyin ve standartlaştırın.
- CSS animasyonlarını öğrenme: Görsel bir ortamda anahtar kareleri, zamanlama işlevlerini ve animasyon özelliklerini deneyin.
- Sunum efektleri: Web tabanlı sunumlar ve portfolyolar için animasyonlu öğeler oluşturun.
Sıkça sorulan sorular
Bu araç ücretsiz mi?
Evet, CSS Animasyon Oluşturucu tamamen ücretsizdir ve kullanım sınırı yoktur. Sınırsız animasyon oluşturabilir, tüm hazır ayarları kullanabilir ve oluşturulan CSS kodunu hiçbir kısıtlama olmadan kopyalayabilirsiniz.
Verilerim güvende mi?
Tüm animasyon oluşturma ve önizleme işlemleri tamamen tarayıcınızda gerçekleşir. Hiçbir sunucuya veri gönderilmez; animasyon ayarlarınız ve CSS kodunuz tamamen gizli kalır.
Hangi tarayıcılar CSS animasyonlarını destekler?
CSS animasyonları Chrome, Firefox, Safari, Edge ve Opera dâhil tüm modern tarayıcılarda desteklenir. Oluşturulan kod, tüm güncel tarayıcı sürümlerinde çalışan standart @keyframes sözdizimini kullanır.
Bir öğede birden fazla animasyonu birleştirebilir miyim?
Evet, CSS kodunda animasyon adlarını virgülle ayırarak tek bir öğeye birden fazla animasyon uygulayabilirsiniz. Her animasyonu ayrı oluşturup stil sayfanızda birleştirin.
cubic-bezier zamanlama işlevi nedir?
cubic-bezier işlevi, animasyonunuz için özel bir ivme eğrisi tanımlar. Animasyonun nasıl hızlanıp yavaşladığını kontrol etmek için dört değer kullanır ve ease-in veya ease-out gibi standart seçeneklerin ötesinde hassas kontrol sunar.
İpuçları ve en iyi uygulamalar
- transform ve opacity kullanın: GPU tarafından donanım hızlandırması uygulanabildiği için en iyi performansı elde etmek üzere transform ve opacity özelliklerini hareketlendirin.
- Animasyonları hafif tutun: Çoğu arayüz etkileşiminde hafif animasyonlar (0.2s-0.5s), uzun ve gösterişli animasyonlardan daha özenli görünür.
- Kullanıcı tercihlerine saygı gösterin: Daha az hareket tercih eden kullanıcılar için animasyonları devre dışı bırakmak veya azaltmak üzere prefers-reduced-motion medya sorgusunu kullanın.
- Uygun dolgu modlarını seçin: Son durumu korumak için "forwards", gecikme sırasında ilk anahtar kareyi uygulamak için "backwards", tam kontrol için ise "both" kullanın.
- Farklı cihazlarda test edin: Performansın masaüstü tarayıcılarından farklı olabileceği mobil cihazlarda animasyonlarınızı önizleyin.