CSS3'ün geçişleri ve animasyonları, resmi olarak "zamanlama işlevi" olarak adlandırılan yumuşatmayı destekler. Yaygın olanları vardır ease-in, ease-out, ease-in-out, ease, ve linear, veya kullandığınız kendi belirtebilirsiniz cubic-bezier().
ease-in animasyonu yavaşça başlatacak ve tam hızda bitirecektir.ease-out animasyonu tam hızda başlatacak ve ardından yavaşça bitirecektir.ease-in-out yavaş başlayacak, en hızlı animasyonun ortasında olacak ve sonra yavaşça bitirecektir.easeease-in-outbitmesinden biraz daha hızlı başlaması dışında gibidir .linear hareket hızı kullanmaz.- Son olarak, burada büyük bir açıklamasını ait
cubic-beziersözdizimi, ancak bazı çok hassas etkileri istemedikçe genellikle gerekmez.
Temel olarak, gevşetme yavaşlamak, durmaktır, hareket hızı yavaşça hızlanmaktır ve doğrusal ikisini de yapmamaktır. MDN belgelerindetiming-function daha ayrıntılı kaynaklar bulabilirsiniz .
Ve yukarıda belirtilen hassas efektleri istiyorsanız, şaşırtıcı Lea Verou'nun cubic-bezier.com'u sizin için orada! Farklı zamanlama fonksiyonlarını grafiksel olarak karşılaştırmak için de kullanışlıdır.
Bir başka, zamanlama fonksiyonu gibi davranır , ancak geçişin başlangıcında ve sonu arasındaki sonlu adımda gerçekleştirir. benim için en çok geçişler yerine CSS3 animasyonlarında yararlı oldu; iyi bir örnek, noktalı göstergelerin yüklenmesidir. Geleneksel olarak, hareket yanılsamasını üretmek için bir dizi statik görüntü (diyelim ki sekiz nokta, her karede iki değişen renk) kullanılır. Bir animasyon ve bir dönüşümle, ayrı karelerin yanılsamasını üretmek için hareketi kullanıyorsunuz! Ne kadar eğlenceli.steps()linearsteps()steps(8)rotate