CSS3 geçişler’ ease-in, ease-out, vb.? arasındaki fark nedir

Bu CSS3 geçişleri ve animasyonlar kolaylaştırılması, resmi olarak bir destek aradı "zamanlama fonksiyonu". Yaygın olanlarıease-in, , *, *5ease-outease-in-out, ve linear veya kendi kullanarak belirtebilirsiniz cubic-bezier().

• ease-in animasyon yavaş yavaş başlayın, ve tam hızda tamamlanır.
• ease-out tam hızda animasyon başlar, yavaş yavaş bitiriyoruz.
• ease-in-out yavaş yavaş başlamak, animasyon orta hızlı, yavaş bitiriyoruz.
• ease biter biraz daha hızlı başlar hariç ease-in-out gibi.
• linear hareket hızı kullanır.
• Son olarak, here's a great description cubic-bezier sözdizimi, ancak çok hassas bazı etkileri istemiyorsan genellikle gerekli değil.

Temel olarak, hareket hızı dışında bir halt yavaş, ağırdan yavaş hızlandırmak için, doğrusal ne yapacak. documentation for timing-function on MDN daha detaylı kaynak bulabilirsiniz.

Ve eğer söz konusu kesin etkileri istiyorsanız, inanılmaz Lea Verou cubic-bezier.com orada sizin için! Farklı zamanlama fonksiyonları grafiksel olarak karşılaştırılması için de işe yarayabilir.

Başka the steps() timing function, linear gibi davranır ama sadece geçiş başlangıcı ve sonu arasındaki adımları sınırlı sayıda gerçekleştirir. steps() geçişler CSS3 animasyonlar, yerine benim için çok yararlı olmuştur, iyi bir örnek, nokta yükleme göstergesi. Geleneksel olarak, bir statik görüntülerin bir dizi (sekiz nokta, iki renk, her kareyi değiştirme) hareket yanılsaması üretmek için kullanır. steps(8) animasyon rotate bir dönüşüm, hareket ayrı bir çerçeve yanılsaması üretmek için kullanıyorsun! Ne kadar eğlenceli.