31 maja 2016

CSS Transitions, czyli efekty przejścia w CSS



Witam! Dziś coś bardziej skomplikowanego (bądź nie) a mianowicie przejścia w CSS. O co chodzi z tymi przejściami? Przejścia mogą nam bardzo urozmaicić i upiększyć transformację tekstu, menu czy czegokolwiek. Jak to wygląda w praktyce można zobaczyć TU.

transition-property
określa, jaka własność stylu ma podlegać efektowi przejścia

transition-duration
określa, jak długo ma trwać ten efekt

transition-timing-function
określa przyspieszenie lub spowolnienie animacji

transition-delay
określa opóźnienie z jakim ma zacząć się efekt

transition
skrót dla wszystkich pozostałych własności

Dokładnie omówienie każdego przejścia:


transition-property

Podajemy tutaj, jaka własność (lub jakie własności) mają być animowane. Jeśli nie określimy tej własności, lub podamy tu słowo kluczowe all, animowane będą wszystkie własności CSS, które tylko da się animować. Wartość none wyłącza efekty przejścia.

Przykład:
transition-property: color;

transition-duration

Tutaj podajemy czas trwania przejścia.

Przykład:


transition-duration: 5s;
transition-timing-function


Własność ta pozwala animacji zwalniać lub przyspieszać w trakcie jej trwania

Kilka szczególnie przydatnych wartości uzyskało także wygodne do zapamiętania aliasy:
SŁOWO KLUCZOWEODPOWIEDNIK CUBIC-BEZIER
easecubic-bezier(0.25, 0.1, 0.25, 1.0)
linearcubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-incubic-bezier(0.42, 0, 1.0, 1.0)
ease-outcubic-bezier(0, 0, 0.58, 1.0)
ease-in-outcubic-bezier(0.42, 0, 0.58, 1.0)
Wartość linear oznacza po prostu liniową zmianę wartości, czyli tempo animacji będzie jednostajne. Pozostałe wartości z powyższej tabeli sprawiają, że animacja zwolni lub przyspieszy na początku lub na końcu.

Przykład:
transition-timing-function: linear;
transition-delay

Możemy tu podać opóźnienie, z jakim wykona się animacja. Wartość równa 0 oznacza brak opóźnienia. Dozwolone są również wartości ujemne (-x), wówczas animacja zacznie się natychmiast (tak, jak przy wartości 0), ale początkowa wartość animowanej własności będzie taka, jakby przejście trwało już od |x| sekund.

Przykład:
transition-delay: 0.5s;

transition

Własność transition to skrótowy zapis wszystkich pozostałych, w kolejności: property, duration, timing function, delay. Na przykład:
transition-property: color;
transition-duration: 5s;
transition-timing-function: ease-in;
transition-delay: 2s;



źródło: blog.marcoos

Brak komentarzy:

Prześlij komentarz