CSS Keyframe Üretici
Yüzde;özellik:değer adımlarını @keyframes bloğu ve animasyon kısayoluna dönüştürür.
CSS Keyframe Üretici
Kulcsçerçeve adımlarını yüzde;özellik:değer biçiminde yapıştırın — her duruş için bir satır, örneğin 0;opacity:0 ardından 100;opacity:1 — ve bu araç tam bir @keyframes bloğu ve eşleşen animasyon kısayolu bildirimini birleştirir. Aynı satıra birden çok özellik:değer çifti ekleyin, noktalı virgülle ayrılmış, o durağında birden çok özelliği canlandırmak için ve daha fazla özellik eklemek için birden çok satır arasında yüzdeyi yeniden kullanın.
Hazır animasyon almak ve adımları el ile yazmayı atlamak için bir ön ayar seçin — solma, kaydırma, atım, sallanma veya sıçrama — diğer tüm seçenekler hala ayarlanabilir veya kendi girdilerinizden her durağı kontrol etmek için özel olarak geçin. Kalan seçenekler animasyon kısayolunu şekillendiriyor: ad, @keyframes kuralı ve animasyon bildirimi tarafından paylaşılan tanımlayıcıyı ayarlar, süre ve gecikme saniye cinsindendir ve zamanlama işlevi, tam bir rahatlama şekli için tüm standart anahtar kelimeleri ve özel bir cubic-bezier() eğrisini kapsar. Animasyonu sabit sayıda tekrarlanacak şekilde ayarlayın veya sonsuzu açın, yön seçin (normal, ters, alternatif, alternatif-ters) ve çalışmadan önce ve sonra ne olacağını belirten doldurma modu seçin ve daha eski Safari ve Android WebView derlemeleri için ayrıca bir @-webkit-keyframes bloğu ve bir -webkit-animation satırı yayınlamak için webkit ön eki seçeneğini açın.
0–100 aralığının dışındaki yüzde değerleri aralığa yapıştırılır, "from" ve "to" 0 ve 100 için takma adlar olarak kabul edilir ve boş veya kötü biçimlendirilmiş satırlar çıktı kırmanın yerine atlanır. Çıktının altındaki tally, kaç keyframe duruşunun oluşturulduğunu ve tam karakter sayısını bildirir. Her şey yazarken yerel olarak tarayıcınızda çalışır — CSS veya animasyon verileri asla sunucuya gönderilmez. Sonucu kopyalayın, bir .txt dosyası olarak indirin veya adımları daha da iyileştirmek için çıktıyı girdiye geri gönderin.