Różnica między łatwym wejściem i wyjściem CSS3 transitions

Przejścia i animacje CSS3 wspierają easing, formalnie nazywany "funkcją czasu". Do najczęstszych należą ease-in, ease-out, ease-in-out, ease, i linear, lub możesz określić swój własny za pomocą cubic-bezier().

• ease-in rozpocznie animację powoli, a zakończy na pełnej prędkości.
• ease-out rozpocznie animację z pełną prędkością, a następnie zakończy powoli.
• ease-in-out rozpocznie się powoli, będzie najszybszy w środku animacji, a następnie zakończy powoli.
• ease jest jak ease-in-out, tyle, że zaczyna się nieco szybciej niż się kończy.
• linear nie używa luzowania.
• wreszcie, oto świetny opis składni cubic-bezier, ale zazwyczaj nie jest to konieczne, chyba że chcesz bardzo precyzyjnych efektów.

Ogólnie rzecz biorąc, luzowanie jest powolnym zatrzymaniem, luzowanie jest powolnym przyspieszaniem, a liniowe nie jest ani jednym, ani drugim. Bardziej szczegółowe zasoby można znaleźć w dokumentacji dla timing-function na MDN.

I jeśli chcesz / align = "center" bgcolor = "# e0ffe0 " / cesarz Chin / / align = center/cubic-bezier.com jest tam dla Ciebie! Jest również przydatny do graficznego porównywania różnych funkcji pomiaru czasu.

Inna, steps() funkcja czasu , działa jak linear, ale wykonuje tylko skończoną liczbę kroków między początkiem przejścia a jego końcem. steps() najbardziej przydał mi się w animacjach CSS3, a nie w przejściach; dobrym przykładem jest wczytywanie wskaźników z kropkami. Tradycyjnie, jeden wykorzystuje serię statycznych obrazów (powiedzmy osiem kropek, dwie zmieniające kolor każdej klatki), aby wytworzyć iluzję ruchu. Dzięki animacji steps(8) i transformacji rotate, używasz ruchu, aby stworzyć iluzję oddzielnych klatek! Zabawne.