Hangi dönüşüm özellikleri animasyona alınabilir?

translateX, translateY, scale ve rotate özellikleri animasyona alınabilir, ayrıca opasite de. Her özellik 0%, 50% ve 100% anahtar kare durumlarında bağımsız olarak ayarlanır.

Hangi zamanlama fonksiyonları mevcuttur?

Oluşturucu, ease, linear, ease-in, ease-out ve ease-in-out ön ayarlarını içerir, ayrıca özel bir cubic-bezier seçeneği vardır, böylece benzersiz bir ivme eğrisi oluşturabilirsiniz.

Animasyonu sonsuza kadar döndürebilir miyim?

Evet. Tekrar sayısını Infinite olarak ayarlayın ve oluşturulan CSS, animation-iteration-count: infinite kullanarak animasyonu sürekli döndürecektir.

Bu aracı kullanmak için CSS bilmem gerekir mi?

Hayır. Oluşturucu tamamen görseldir — sadece kaydırıcıları hareket ettirin ve aşağı açılır menüden değerler seçin. CSS sizin için otomatik olarak oluşturulur ve herhangi bir projeye kopyalamaya hazırdır.

Oluşturulan CSS tüm modern tarayıcılarla uyumlu mu?

Evet. Çıktı standart @keyframes ve animasyon kısaltma özelliğini kullanır, bu da Chrome, Firefox, Safari ve Edge gibi tüm modern tarayıcılar tarafından desteklenir ve herhangi bir üretici öneki olmadan.

Bu araç, verilerimi yükler mi?

Hayır. Her şey tarayıcınızda çalışır, bu yüzden verileriniz cihazınızdan asla çıkmaz — sayfa yüklendikten sonra bile çevrimdışı çalışır.

🎬 CSS Anahtar Çerçeve Oluşturucu

Saniyeler içinde CSS anahtar çerçeve animasyonları tasarlayın — her durakta transform ve opasite ayarlayın, canlı animasyonu önizleyin ve hazır yapıştırma @keyframes kodunu kopyalayın. Kurulum gerekmez, kayıt gerekmez, tarayıcınızda tamamen çalışır.

Animasyon Adı

Süre (s)

Zamanlama

Tekrar

Tasarım gereği gizli. Bu araç, tarayıcınızda tamamen çalışır — girdiğiniz hiçbir şey yüklenmez ya da saklanmaz ve çevrimdışı da çalışır.

Hakkında

CSS Anahtar Çerçeve Oluşturucu, el ile tek bir satır kod yazmadan @keyframes animasyonları oluşturmanıza olanak tanır. Transform özellikleri — X ve Y’de kaydırma, ölçeklendirme ve döndürme — ve 0%, 50% ve 100% ana duraklarında opasite tanımlarsınız. Animasyon süresi, bir zamanlama fonksiyonu (kolay, doğrusal, kolay-çıkış, kolay-giriş, kolay-giriş-çıkış veya özel bir kübik-bezier) ve tekrar sayısının (sınırlı veya sonsuz) tümü panelde yapılandırılabilir. Canlı bir animasyon önizlemesi anında güncellenir, böylece hareketin doğru hissettirilmesine kadar değerleri ayarlayabilirsiniz. Hazır olduğunuzda Kopyala’ya tıklayın ve tamamı @keyframes bloğu — animasyon kısaltması da dahil — kopyalayıcıya yerleştirilir ve stiller dosyasına yapıştırmaya hazırdır. Her şey dosya yüklemeden ve hiçbir veri hiçbir yere göndermeden tarayıcıda çalışır.

Nasıl kullanılır

0% durumunda (animasyonun başlangıç noktası) dönüşüm değerlerini — X/Y kaydırma, ölçeklendirme ve döndürme — ve opasiteyi ayarlayın.
50% durumunu ayarlayarak hareketin orta noktasını tanımlayın veya varsayılan bırakarak basit iki durumlu geçiş oluşturun.
Animasyonun son durumu için 100% durumunu ayarlayın, ardından süresini (saniye cinsinden), zamanlama fonksiyonunu ve tekrar sayısını yapılandırın.
Canlı önizlemeyi gerçek zamanlı olarak izleyin ve animasyonun tam olarak doğru görünmesine kadar her değeri ince ayarlayın.
CSS'i Kopyala'ya tıklayarak tam @keyframes bloğunu ve animasyon özelliğini kopyalayın, ardından bunu doğrudan stiller dosyanıza yapıştırın.

SSS

Hangi dönüşüm özellikleri animasyona alınabilir?: translateX, translateY, scale ve rotate özellikleri animasyona alınabilir, ayrıca opasite de. Her özellik 0%, 50% ve 100% anahtar kare durumlarında bağımsız olarak ayarlanır.
Hangi zamanlama fonksiyonları mevcuttur?: Oluşturucu, ease, linear, ease-in, ease-out ve ease-in-out ön ayarlarını içerir, ayrıca özel bir cubic-bezier seçeneği vardır, böylece benzersiz bir ivme eğrisi oluşturabilirsiniz.
Animasyonu sonsuza kadar döndürebilir miyim?: Evet. Tekrar sayısını Infinite olarak ayarlayın ve oluşturulan CSS, animation-iteration-count: infinite kullanarak animasyonu sürekli döndürecektir.
Bu aracı kullanmak için CSS bilmem gerekir mi?: Hayır. Oluşturucu tamamen görseldir — sadece kaydırıcıları hareket ettirin ve aşağı açılır menüden değerler seçin. CSS sizin için otomatik olarak oluşturulur ve herhangi bir projeye kopyalamaya hazırdır.
Oluşturulan CSS tüm modern tarayıcılarla uyumlu mu?: Evet. Çıktı standart @keyframes ve animasyon kısaltma özelliğini kullanır, bu da Chrome, Firefox, Safari ve Edge gibi tüm modern tarayıcılar tarafından desteklenir ve herhangi bir üretici öneki olmadan.
Bu araç, verilerimi yükler mi?: Hayır. Her şey tarayıcınızda çalışır, bu yüzden verileriniz cihazınızdan asla çıkmaz — sayfa yüklendikten sonra bile çevrimdışı çalışır.