Animacje na stronie internetowej mogą przyciągnąć więcej użytkowników. Zadaj sobie pytanie - czy nie chciałbyś odkrywać więcej, gdybyś zobaczył stronę internetową zawierającą sporo animacji? Teraz dzięki przejściom CSS możesz ożywić swoją pracę dzięki świetnym animacjom. I pamiętaj, że należy to zrobić dobrze. Poznajmy świat przejść CSS w następującej kolejności:
- Dlaczego przejścia CSS?
- Własność przejściowa
- Co musisz określić?
- Właściwość funkcji funkcji pomiaru czasu przejścia
- Właściwość Opóźnienie przejścia
Dlaczego przejścia CSS?
Weźmy przykład. Gdybyś miał zmienić kolor elementu z białego na niebieski, zmiana ta jest prawie natychmiastowa. Aby uzyskać bardziej animowany efekt, możesz wprowadzać tę zmianę stopniowo. Wygląda to również całkiem atrakcyjnie wizualnie. Włączając przejścia CSS, możesz dostosować sposób zachodzenia zmian. Możesz zdefiniować, jak zmiany w elementach zachodzą w określonych odstępach czasu, zgodnie z krzywą przyspieszenia.
Przejścia CSS pozwalają zdefiniować zmiany dla elementy, określone przedziały czasowe, prędkość krzywej przyspieszenia i wiele więcej. Możesz to wszystko zrobić bez użycia Flasha lub JavaScript .
Aby uzyskać lepsze zrozumienie, możesz zapoznać się z poniższym obrazem:
Na powyższym obrazku element HTML zmieni się z czerwonego na niebieski w ciągu jednej sekundy. Podczas przejścia zobaczysz również kolor pośredni. Jeśli nie zamierzasz używać przejść CSS, zauważysz, że zmiana koloru z czerwonego na niebieski jest natychmiastowa - nie zobaczysz koloru pośredniego. Dzięki przejściom CSS zauważysz animowany efekt, gdy elementy HTML zmieniają się ze starego stanu na nowy.
Własność przejściowa
Możesz użyć skróconej właściwości przejścia, aby kontrolować przejścia CSS. Użycie tego skrótu jest nie tylko łatwe, ale pozwala również uniknąć niezsynchronizowanych parametrów, które mogą być dość frustrujące przy debugowaniu w CSS.
Właściwość przejścia określa właściwości CSS, do których chcesz uzyskać efekt przejścia. Animowane są tylko te właściwości CSS.
Składnia:
przejście:
Jako początkujący możesz napotkać pewne trudności w używaniu skrótu. Jeśli uważasz, że używanie skrótu jest teraz dla Ciebie trochę skomplikowane, możesz osobno określić właściwości przejścia. Dla elementu HTML możesz określić właściwości przejścia jeden po drugim, jak pokazano w poniższym przykładzie:
div {width: 100px height: 100px background: jasnoniebieskie przejście-property: szerokość przejście-czas trwania: 2 s przejście-czas-funkcja: liniowe opóźnienie przejścia: 1 s} div: hover {szerokość: 300px}Najedź na pole
W powyższym przykładzie określiliśmy właściwości (właściwość-przejścia, czas trwania-przejścia, funkcję-czasu-przejścia i opóźnienie-przejścia) oraz ich wartości oddzielnie. Wkrótce dowiemy się o tych właściwościach przejścia.
Co musisz określić?
Są przede wszystkim dwie rzeczy, które musisz określić, aby utworzyć przejścia CSS: właściwość CSS, do której chcesz dodać efekt, oraz czas trwania tego efektu.Musisz pamiętać o jednej rzeczy - jeśli nie określisz czasu trwania, przejście przyjmie domyślną wartość 0 i nie będzie żadnego efektu.
co to jest skaner w java
Rozważmy przykład:
Poniższy kod definiuje efekt przejścia właściwości width na okres pięciu sekund.
div {width: 100px height: 100px background: blue przejście: szerokość 5s} div: hover {szerokość: 600px}Przesuń kursor na element div powyżej, aby zobaczyć efekt przejścia.
W powyższym kodzie zobaczysz, że po najechaniu kursorem na niebieskie pole, niebieskie pole stopniowo zwiększa swoją szerokość na czas pięciu sekund. Zauważysz również, że po usunięciu kursora z niebieskiego pola, niebieskie pole stopniowo (a nie natychmiast) powróci do swojego pierwotnego rozmiaru. Możesz także zmienić wartości szerokości i czasu trwania, aby zobaczyć, jak ta właściwość przejścia wpływa na element HTML.
Możesz także dodać efekt przejścia do więcej niż jednej właściwości. Możesz to zrobić, oddzielając właściwości przecinkami. Rozważmy przykład:
W poniższym kodzie właściwość przejścia jest określona dla szerokości, wysokości i transformacji.
div {padding: 15px width: 150px height: 100px background: green przejście: width 2s, height 2s, transform 2s} div: hover {width: 300px height: 200px transform: rotate (360deg)} Witaj świecie (Najedź na mnie)
W powyższym przykładzie zobaczysz, jak przesuwa się zielone pole po najechaniu kursorem na prostokąt.
Podaliśmy tylko właściwość i czas trwania. Zobaczmy inne parametry z różnymi przykładami.
Właściwość funkcji funkcji pomiaru czasu przejścia
Ta właściwość definiuje krzywą prędkości dla efektu przejścia. Może przyjmować następujące wartości:
- Wartość łatwości: Jest to wartość domyślna, w przypadku której efekt jest na początku wolny, następnie szybszy i powoli się kończy.
- Wartość liniowa: Efekt ten nie zmienia szybkości przejścia - utrzymuje stałą prędkość od początku do końca.
- Wartość ułatwienia: Ten efekt zaczyna się powoli.
- Wartość luzu: Ten efekt ma powolny koniec.
- Wartość łatwego wchodzenia: Ten efekt ma zarówno powolny początek, jak i koniec.
- Wartość sześcienna-beziera (n, n, n, n): Możesz określić własny zestaw wartości w funkcji sześciennej-Beziera.
Poniższy kod przedstawia efekty przejścia dla wartości liniowych, łagodnych, łagodnych, łagodnych i wychodzących.
div {width: 100px height: 100px background: pink przejście: width 2s} # div1 {przejście-timing-function: linear} # div2 {przejście-timing function: easy} # div3 {przejście-timing function: easy-in } # div4 {funkcja-czasu-przejścia: ułatwienia} # div5 {funkcja-czasu-przejścia: przerwa-in-out} div: hover {szerokość: 300px}Najedź na elementy div poniżej
liniowy
łatwość
łatwość
wyluzować
łatwość wkładania
Właściwość Opóźnienie przejścia
Czasami chcesz, aby animacja pojawiła się po pewnym czasie. Właściwość opóźnienia przejścia umożliwia określenie opóźnienia dla efektu przejścia. Możesz określić opóźnienie w sekundach.
sortuj tablicę c ++ malejąco
Weźmy przykład, aby zobaczyć opóźnienie w efekcie przejścia:
div {szerokość: 100px wysokość: 100px tło: żółte przejście: szerokość 3s przejście-opóźnienie: 1s} div: hover {szerokość: 300px}Najedź na element div poniżej
Uwaga: Możesz zaobserwować 1 sekundowe opóźnienie przed rozpoczęciem efektu
W powyższym kodzie, kiedy najedziesz kursorem na żółte pole, zauważysz (przez jedną sekundę), że nie ma żadnego efektu. Po odczekaniu jednej sekundy zauważysz efekt.
W ten sposób dochodzimy do końca tego artykułu CSS Transitions. Możesz teraz dodawać animacje do swoich stron internetowych. Wypróbuj te przykłady.
Sprawdź nasze który obejmuje szkolenie na żywo prowadzone przez instruktora i rzeczywiste doświadczenie projektowe. To szkolenie zapewni Ci biegłość w pracy z technologiami internetowymi zaplecza i front-endu. Obejmuje szkolenia w zakresie tworzenia stron internetowych, jQuery, Angular, NodeJS, ExpressJS i MongoDB.
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na blogu „CSS Transition”, a my skontaktujemy się z Tobą.