Działanie przejścia “transition-property”
W tym materiale zobaczysz jak korzystać z przejść , tzn. animowanych zmian w różnych właściwościach CSS.
Na pierwszy ogień dajmy transition-property
. To podstawowa właściwość przejść określająca, które ze zmienionych wartości CSS mają być animowane.
Przykład który możesz zobaczyć poniżej, rozjaśni możliwości właściwości:
jovial-mcnulty-03dtl
jovial-mcnulty-03dtl danielminschinski
Czas trwania przejść “transition-duration”
W powyższym materiale pokazałem właściwość transition-property
. Teraz zobaczysz jak działa transition-duration
. Wartością dla tej właściwości to jest zwykły czas, w jakim ma odbyć się cała przemiana.
Jednostką czasu jest najczęściej sekunda. Tak więc jeśli określimy transition-duration: 0.5s
to przemiana wykona się w pół sekundy. Możemy użyć milisekund – 500ms
czyli 0.5s
.
Spójrz na poniższy przykład. Zobacz jak można manipulować ruch elementów:
jovial-glade-j17wb
jovial-glade-j17wb danielminschinski
Tempo przejścia czyli “transition-timing-function”
Właściwość która jest godna uwagi to transition-timing-function
. Określa szybkość zachodzenia zmian na danych etapach – start, środek i koniec. Właściwość ta nie wpływa w żaden sposób na długość wykonywania przemian (transition-duration
).
Przejdźmy do dogłębnego poznania właściwości. Wartością domyślną jest ease
(szybki start i zakończenie z powolnym środkiem), pozostałe popularne właściwości: ease-in-out
(powolny start i koniec), linear
(stałe tempo) i cubic-bezier(x,x,x,x)
(x to liczna od 0 do 1 – dowolnie stworzona przez nas funkcja, ale ta wartość nie jest tak często używana).
Sprawdź na poniższym przykładzie jak można zastosować powyższą właściwość:
nervous-thunder-gdgs2
nervous-thunder-gdgs2 danielminschinski
Opóźnienie przejścia “transition-delay”
Ostatnią właściwością w tematyce przejść, którą chce Wam pokazać, będzie transition-delay
.
Powyższa właściwość to opóźnienie zachodzenia zmian. Istotne jest, że czas opóźnienia transformacji nie wpływa w żaden sposób na długość jej samej.
Jednostką określającą transition-delay
jest sekunda. Przykładowo: transition-delay: 3s;
opóźni start wykonania przemiany o 3 sekundy.
Po więcej rozwiązań zapraszam do poniższego przykładu:
gifted-roman-6q29t
gifted-roman-6q29t danielminschinski
Jedna główna właściwość – “transition”
Wiemy już jakie są właściwości związane z przemianami. Zobaczmy jak je teraz zgrupować za pomocą jednej właściwości transition
.
Do podstawowego działania właściwości potrzebujemy: transition-property
oraz transition-duration
, więc zbierając wszystko w jednej właściwości otrzymamy:transition: all 1s;
Bardziej złożona właściwość mogłaby wyglądać następująco:transition: all 1s linear 2s
Podczas tworzenia takich właściwości musimy przyjąć następujący wzorzec:transition: property duration timing-function delay
Pójdźmy krok dalej i stwórzmy jeszcze bardziej rozbudowaną właściwość:margin-left 1s, color 1.5s, width 2s
Właściwość transition
przyspiesza nam kodowanie. Sprawniej napisać jedną, krótką właściwość z kilkoma wartościami niż kilka długich właściwości.
Spójrz na poniższy przykład z zastosowaniem właściwości transition
:
weathered-sound-sp8j4
weathered-sound-sp8j4 danielminschinski
To by było na tyle w temacie przejść CSS. Mogłeś zauważyć, że możliwości edycji przejść jest wiele. Dla każdego coś dobrego. Od koloru i czasu nasze elementy strony możemy manipulować.
W następnym materiale zobaczysz jak tworzyć transformacje 2D. Do następnego!
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA