Różnica między ułatwieniami i wygasaniem przejść CSS3

Jaka jest różnica między CSS3 przejścia ease-in, ease-outitp?

Przejścia i animacje CSS3 obsługują wygładzanie, formalnie nazywane „funkcją czasową”. Spotykane są ease-in, ease-out, ease-in-out, ease, i linearczy można określić za pomocą własnego cubic-bezier().

• ease-in rozpocznie animację powoli i zakończy z pełną prędkością.
• ease-out rozpocznie animację z pełną prędkością, a następnie zakończy się powoli.
• ease-in-out rozpocznie się powoli, będzie najszybszy w środku animacji, a następnie powoli zakończy.
• easejest jak ease-in-out, ale zaczyna się nieco szybciej niż kończy.
• linear nie używa łagodzenia.
• Wreszcie tu świetny opis w cubic-bezierskładni, ale to nie jest zazwyczaj konieczne, chyba że chcesz kilka bardzo dokładnych efektów.

Zasadniczo, łagodzenie to spowolnienie do zatrzymania, łagodzenie to powolne przyspieszanie, a liniowe to żadne działanie. Bardziej szczegółowe zasoby można znaleźć w dokumentacji timing-functionna MDN .

A jeśli chcesz wyżej wymienionych precyzyjnych efektów, niesamowity cubic-bezier.com Lea Verou jest dla Ciebie! Jest to również przydatne do graficznego porównywania różnych funkcji pomiaru czasu.

Innym, funkcja rozrządu , działa podobnie , ale tylko wykonuje skończonej liczbie kroków między początkiem transformacji i jej końca. był dla mnie najbardziej przydatny w animacjach CSS3, a nie w przejściach; dobrym przykładem jest ładowanie wskaźników z kropkami. Tradycyjnie używa się serii statycznych obrazów (powiedzmy ośmiu punktów, dwóch zmieniających kolor w każdej klatce), aby stworzyć iluzję ruchu. Dzięki animacji i transformacji wykorzystujesz ruch do stworzenia iluzji oddzielnych klatek! Jak zabawnie.steps()linearsteps()steps(8)rotate