Comment on page
Właściwość transition
W CSS możemy wykorzystać poznane we wcześniejszym rozdziale pseudoklasy do wywoływania zmiany stanu. Brzmi enigmatycznie, ale zerknijcie na przykład poniżej.
to jest link
<a href="" class="link">to jest link</a>
a.link {
padding: 10px 20px;
background-color: salmon;
color: #fff;
}
a.link:hover {
background-color: #1F2B6C;
}
Zauważyć możemy zmianę koloru tła linku po najechaniu na niego kursorem. Zawdzięczamy to pseudoklasie
:hover
. Zmiana koloru jest nagła. Możemy nadać jej bardziej 'delikatnego', stopniowego charakteru, dodając właściwość transition
, czyli płynnego przejścia w czasie między stanami zdefiniowanymi w CSS. Najedź kursorem na poniższy link. Czy widzisz różnicę? to jest link
<a href="" class="link">to jest link</a>
a.link {
padding: 10px 20px;
background-color: salmon;
color: #fff;
transition: all 0.7s ease-in-out; /*dodanie funkcji przejścia*/
}
a.link:hover {
background-color: #1F2B6C;
}
Sprawdźmy teraz, z czego składa się funkcja
transition
. Zapis transition: all 0.7s ease-in-out
jest zapisem skrótowym. Rozłóżmy go na czynniki pierwsze: transition-property: all;
transition-duration: 0.7s;
transition-timing-function: ease-in-out;
transition-property
określa nam, na które właściwości CSS wpłynie funkcja przejścia. Wartośćall
odpowiada za wszystkie właściwości. Jeśli chcielibyśmy animować tylko kolor tekstu, to wpisalibyśmycolor
, jeśli tło tobackground-color
itd.
transition-property: color;
transition-property: background-color;
transition-property: border;
transition-duration
, czyli czas trwania przejścia. Im dłuższy, tym bardziej subtelna będzie animacja. Pamiętajmy o dodawaniu jednostek – sekund (s
) lub milisekund (ms
).transition-timing-function
, czyli sposób, w jaki przejście będzie zachodzić. Opisuje to funkcja czasu. W CSS występuje kilka ich predefiniowanych rodzajów:
transition-timing-function: linear; /* zmiana następuje wg funkcji liniowej */
transition-timing-function: ease; /* zmiana następuje wg funkcji liniowej */
transition-timing-function: ease-in; /* animacja na początku ma wolniejsze tempo, i przyspiesza na końcu */
transition-timing-function: ease-out; /* animacja na początku ma szybsze tempo, i zwalnia na końcu */
transition-timing-function: ease-out; /* animacja na początku ma szybsze tempo, i zwalnia na końcu */
transition-timing-function: cubic-bezier(); /* przejście następuje wg zadanej fukcji Beziera */
Jak działają podstawowe funkcje i funkcje Beziera na animowanych elementach, możesz zobaczyć na stronie cubic-bezier.com.
Występuje jeszcze jeden parametr:
transition-delay
– czyli opóźnienie danego przejścia, również podajemy go w jednostkach czasowych.
Pełny zapis funkcji transition wygląda następująco:
transition : <transition-property> || <transition-duration> || <transition-timing-function> || <transition-delay>
Tutaj przykład animacji z zastosowanym opóźnieniem (
transition-delay
): transition: all 0.7s ease-in-out 0.7s;
to jest link
Exercise::Ćwiczenie 13Pora na ożywienie linków na stronie. Niech każdy link z nawigacji po najechaniu kursorem zmieni kolor. Wykorzystaj funkcjętransition
z dobranymi przez Ciebie parametrami czasu.Zmień kolor tła przycisków po najechaniu kursorem, tak aby osiągnąć podobny do poniższego efekt:

Last modified 2yr ago