#69. CSS – przejścia

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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:

PRZYKŁAD. KLIKNIJ, ABY PODEJRZEĆ…

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 

Chcesz na bieżąco otrzymywać informację o nowych materiałach? Zapisz się do NEWSLETTERA!