CSS Anahtar Çerçeve Animasyon Stüdyosu
Süresi kontrolü ve anahtar çerçeveleri ile yüzer, nabız, sıçrama, sallama ve dönüş için pürüzsüz CSS animasyonları oluşturun.
Tarayıcınızda çalışır. Dosyalarınız cihazınızdan asla çıkmaz. Nasıl kontrol edeceğinizi görün
…
Nasıl yapılır
- 1Adım 1: CSS Anahtar Çerçeve Animasyon Stüdyosu aracını açın ve verilerinizi girin
Sayılarınızı veya metninizi yazın, dosyanızı ekleyin ya da ihtiyacınız olan seçenekleri belirleyin. Hiçbir şey yüklenmez: her şey tarayıcınızda kalır.
- 2Adım 2: CSS Anahtar Çerçeve Animasyon Stüdyosu ne yapar
Süresi kontrolü ve anahtar çerçeveleri ile yüzer, nabız, sıçrama, sallama ve dönüş için pürüzsüz CSS animasyonları oluşturun.
- 3Adım 3: Sonucu okuyun ve karşılaştırın
Sonuç hemen görünür. Cevabın nasıl değiştiğini görmek için bir değeri değiştirin, sonra durumunuza uyan rakamı tutun.
- 4Adım 4: Kopyalayın veya kaydedin
Sonucu kopyalayın veya indirin. Önemli bir karar için resmî kaynaktan veya bir danışmandan doğrulayın.
Bu araç hakkında
Düğmelere, kahraman rozetlerine, bildirim simgelerine ve yükleme göstergeleri canlandırın. Zayıf Yürüme, Dikkat Nabzı, Oyuncu Atlama, Hata Sallanması ve Sonsuz Dönüş de dahil olmak üzere popüler UI animasyon önceden ayarlarından seçin. Çalma süresini saniyeler içinde ayarlayın ve üretime hazır CSS anahtar çerçeve kodunu kopyalayın.
En iyi sonuç için ipuçları
Başlamadan önce seçenekleri okumak için bir an ayırın ve aracı önce küçük bir örnekle deneyin. Her şey kendi cihazınızda tarayıcıda çalışır; yazdığınız ya da eklediğiniz hiçbir şey yüklenmez ve sekmeyi kapatmak her şeyi siler. Bir şey doğru görünmüyorsa sayfayı yeniden yükleyip tekrar deneyin ya da neyin ters gittiğini bize bildirmek için bu sayfadaki bildirim bağlantısını kullanın. Bir sonuç hâlâ yanlış görünüyorsa hangi kutunun en çok etki ettiğini görmek için her seferinde tek bir değeri değiştirin. Aracı tekrar kullanacaksanız bu sayfayı yer imlerine ekleyin.
Kısaca
- Kategori: Görseller
- Tarayıcınızda çalışır, kayıt yok, yükleme yok.
- Girdiğiniz bilgiler cihazınızda kalır.
- Birçok dilde mevcut.
- İçeriğin son gözden geçirilmesi:
Sık sorulan sorular
Bu CSS animasyonları donanım hızlandırılmış mı?
Yes. Animations utilize `transform: translate()` and `transform: scale()`, which run on the GPU via compositor threads without layout thrashing.
Animasyonun hızını ayarlayabilir miyim?
Evet. Süresi kaydırıcı gerçek zamanlı olarak animasyonları 0.5 saniyeden 4.0 saniyeye kadar hızlandırmanıza veya yavaşlatmanıza izin verir.
Sadece hareketli olarak animasyonu nasıl tetiklerim?
In your CSS, attach the `animation:` property inside a `:hover` pseudo-class (e.g., `.button:hover ( animation: pulse 1s infinite; )`).
Bunun için JavaScript kitaplıkları gerekiyor mu?
Hayır, oluşturulan animasyonlar %100 saf CSS'dir ve JavaScript başlığı gerekmez.