CSS animasyon üretici
Hareket hazır ayarlarını veya anahtar kareleri ayarlayın ve denetlemek için animasyonu oynatın. Web sayfasında kullanmak için CSS ve HTML kullanım örneği alın.
Neler yapabilirsiniz
Bir hazır ayardan hareketi ayarlayın
Giriş, çıkış ve döndürme dâhil 12 tür arasından seçin. Süreyi ve tekrarı kullanımınıza göre ayarlayın.
Ara durumları da düzenleyin
Her ana kare için hareket, döndürme, ölçek ve saydamlığı belirleyin ve oluşturulan hareketi kontrol edin.
CSS ve HTML alın
Aynı sınıfı içeren animasyon CSS'ini ve bir HTML kullanım örneğini kopyalayın ya da kaydedin.
Nasıl kullanılır
Bir hazır ayar seçin
İstediğiniz hareketi seçin ve 1 oynatmalık süreyi belirleyin. Farklı bir hazır ayar seçmek, ayarladığınız değerleri de değiştirir.
Yalnızca ihtiyacınız olan bölümleri ayarlayın
Ara hareketi, yönü, tekrarı ve diğer ayarları değiştirmek için oynatma ayrıntılarını ya da ana kareleri açın.
Oluşturun ve oynatın
“CSS oluştur ve önizle” seçeneğiyle kontrol edin. Herhangi bir ayarı değiştirirseniz yeniden oluşturun.
CSS ve HTML alın
CSS'yi uygulayın ve bir HTML öğesine toollet-motion sınıfını ekleyin. HTML kullanım örneğini CSS ile birlikte kullanın.
Ne zaman işe yarar
Bir giriş animasyonu oluşturun
Giriş hareketini ve hızını ayarlamak için bir soldurma ya da alttan giriş hazır ayarını kullanın.
Düğmeyle etkileşim sırasında hareket
Etkileşime yanıt veren hareket oluşturmak için başlangıç koşulunu fare üzerine gelme ya da klavye odağı olarak değiştirin.
Ana kareleri ve oynatma koşullarını anlama
Ara durumlar ve süre
Bir ana karenin % değeri, 1 oynatma içindeki konumudur. 1 saniyelik bir animasyonda %50, 0.5 saniyeye denk gelir. Kolaylaştırma, ana kareler arasında değerlerin nasıl değiştiğini belirler.
Hareket, döndürme ve görünüm
Yatay/dikey konum, özgün konumdan ne kadar hareket edildiğidir. Ölçek 1 özgün boyuttur; saydamlık 0 saydam, 1 opaktır.
Gecikme, tekrar ve yön
Gecikme, oynatma başlamadan önce yalnızca bir kez eklenir. Sonlu oynatmada toplam süre, gecikme + 1 oynatmanın süresi × tekrar sayısıdır. Alternatif mod ileri ve geri yön arasında geçiş yapar.
Oynatma öncesi ve sonrası durumlar
Gecikme sırasında ve oynatma bittikten sonra hangi durumun görüneceğini seçin. Ters ve alternatif ayarlar, oynatmanın başında ve sonunda hangi ana kare konumlarının kullanılacağını değiştirir.
Azaltılmış hareket ayarları
Oluşturulan CSS, cihazınızın azaltılmış hareket ayarını destekler. Animasyonu durdurur ve yapılandırılmış yön ile tekrar sayısına göre belirlenen uç durumu kullanır. Sürekli oynatmada ilk oynatmanın ucunu kullanır.
Sık sorulan sorular
Yalnızca bir kez oynatabilir miyim?
“Tekrarla” seçeneğini kapatın ve tekrar sayısını 1 yapın. Standart hazır ayarlar 1 oynatmayla başlar; döndürme ve yüzme ise sürekli tekrar açık başlar.
CSS'yi hangi öğeye uygulamalıyım?
Bir HTML öğesine toollet-motion sınıfını ekleyin ve oluşturulan CSS ile birlikte kullanın. HTML kullanım örneği, tek başına çalışan eksiksiz bir web sayfası değil, bir düğme öğesi parçasıdır.
Kaç ana kare oluşturabilirim?
%0'deki başlangıç ve %100'deki bitiş dâhil 2–8 ana kare tanımlayabilirsiniz. Yeni bir ana kare eklemek onu en geniş aralığın ortasına yerleştirir. Başlangıç ve bitiş silinemez, yalnızca % konumları sabittir.
Bir ayarı değiştirdikten sonra önizleme kayboldu.
Yanlışlıkla önceki ayarlardan kalan hareket ya da kodu kullanmamanız için ayarlar değiştiğinde sonuçlar temizlenir. Geçerli ayarları kontrol etmek için yeniden oluşturun.
Önizleme neden hareket etmiyor?
Cihazınızda azaltılmış hareket etkinleştirildiğinde hareket durur. Fare üzerine gelme ve odak ayarları için başlangıç koşullarını da kontrol edin. Bu sekmeden başka yere geçtiğinizde önizleme duraklar.
Aynı sayfada birden fazla animasyon kullanabilir miyim?
Oluşturulan sınıf ve ana kare adları ortaktır. Ayrı animasyonlar kullanmak için her animasyonun her iki adını da değiştirin ve bu değişiklikleri ilgili HTML'e yansıtın.
Girişler ve sonuçlar
- Ayarlar
- 12 hazır ayar, 2–8 ana kare ve 0.2–60 saniyelik süre.
- Oynatma
- 0–60 saniyelik gecikme, 1–100 tekrar ya da sürekli tekrar, kolaylaştırma, yön, oynatma öncesi ve sonrası durumlar ve başlangıç koşulları.
- Çıkış
- CSS ve bir HTML kullanım örneği. Yalnızca hareket tanımlanır; eksiksiz bir web sayfası ya da video dosyası oluşturulmaz.