Różnica między wprowadzaniem przejść CSS3 a ich wyprowadzaniem

Question

Jaka jest różnica między przejściami CSS3 "ease-in, ease-out itp.?

Answer 1

Przejścia i animacje CSS3 wspierają łagodzenie, formalnie zwane "funkcją pomiaru czasu". Najczęściej są to: ease-in, , ease-in-out, ease i linear lub możesz określić własne przy użyciu cubic-bezier().

• ease-in rozpocznie animację powoli i zakończy na pełnych obrotach.
• ease-out rozpocznie animację z pełną szybkością, a następnie powoli ukończy.
• ease-in-out rozpocznie się powoli, będzie najszybszy w środku animacji, a następnie powoli ukończy.
• ease jest jak ease-in-out, ale zaczyna się nieco szybciej niż się kończy.
• linear nie używa złagodzenia.
• Wreszcie, here's a great description ze składni cubic-bezier, ale zwykle nie jest to konieczne, chyba że chcesz uzyskać bardzo precyzyjne efekty.

Zasadniczo, łagodzenie jest spowolnione do zatrzymania, łagodzenie w jest powoli przyspieszać, a liniowe nie robić ani. Więcej szczegółowych informacji można znaleźć pod adresem documentation for timing-function on MDN.

A jeśli chcesz uzyskać dokładnie wspomniane efekty, zadzwoń pod numer cubic-bezier.com Lea Verou! Przydaje się również do graficznego porównania różnych funkcji czasowych.

Kolejny, the steps() timing function, działa jak linear, ale wykonuje tylko skończoną liczbę kroków między początkiem i końcem przejścia. steps() był mi najbardziej przydatny w animacjach CSS3, a nie w przejściach; dobrym przykładem są wskaźniki ładowania z kropkami. Tradycyjnie używa się serii statycznych obrazów (powiedzmy osiem kropek, dwa zmieniające się kolory w każdej klatce), aby wytworzyć złudzenie ruchu. Dzięki transformacji steps(8) i transformacji rotate używasz ruchu, aby stworzyć iluzję oddzielnych ramek! Jak zabawnie.