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:
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:
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ść:
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:
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:
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