Jaka jest różnica między przejściami CSS3 "ease-in
, ease-out
itp.?Różnica między wprowadzaniem przejść CSS3 a ich wyprowadzaniem
Odpowiedz
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 jakease-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.
Ładny opis. Rozwiązałem moje zapytanie. – Pupil
- 1. Jaka jest różnica między wprowadzaniem danych a rekordami danych?
- 2. Różnica między GetHostEntry a GetHostByName?
- 3. Różnica między WhitespaceTokenizerFactory a StandardTokenizerFactory
- 4. Różnica między obiektem a *?
- 5. Różnica między jquery a $
- 6. Różnica między wysokością a tłumaczeniemZ
- 7. Różnica między ApplicationInfo a PackageInfo?
- 8. Różnica między DataSource a DataSet
- 9. Różnica między pulą a klastrem
- 10. różnica między __u8 a uint8_t
- 11. Różnica między uwsgi_pass a proxy_pass w Nginx?
- 12. Różnica między String [] a i String ... a
- 13. Różnica między bip pid a $$
- 14. Różnica między kodowaniem a sortowaniem?
- 15. Różnica między onbeforeunload a onunload
- 16. Różnica między OpenCV a OpenCL
- 17. Różnica między CMAKE_PROJECT_NAME a PROJECT_NAME?
- 18. Różnica między autoconf a autoreconf
- 19. Różnica między transakcją a transakcjąScope
- 20. Różnica między File.Copy a File.Move
- 21. Różnica między _declspec a __declspec?
- 22. Różnica między repozytorium a usługą?
- 23. Różnica między CCNode a CCLayer?
- 24. różnica między * y ++ a ++ * y?
- 25. Różnica między IPFS a Filecoin?
- 26. Różnica między systemem a shell_exec
- 27. Różnica między Redis a kafka
- 28. Różnica między dodawaniem a dodawaniem
- 29. Różnica między DisplayFor a ValueFor
- 30. Różnica między @EntityScan a @ComponentScan
Musisz szukać trudniej. Nie może być definicji sieci dla czegoś, co jest technologią internetową. Pomyśl o tym. – BoltClock
Jeśli pokażesz trochę badań, ludzie zwykle przeskakują, aby odpowiedzieć. –
Muszę powiedzieć, że pomimo upadków i dobrej logiki za nimi, cieszę się, że mogę znaleźć to pytanie (a zwłaszcza odpowiedź minitech, poniżej) ... ** ponieważ **, gdy idziesz do źródła normy, to: http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp ... Nie było dla mnie jasne, jaka jest różnica między "łatwość" i "łatwość wchodzenia". Pewnie mogłem znaleźć dowolną liczbę artykułów na ten temat .. ale najpierw zwracam się do SO, ponieważ uwielbiam sposób, w jaki działa SO ... i to był pierwszy Q/AI znaleziony, aby pomóc mi wyjaśnić "łatwość" -vs.- "łatwość wejścia". Dziękuję wszystkim. – govinda