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śmy color, jeśli tło to background-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 13
Pora 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:
​
Animacje w CSS
Przekształcanie elementów (transform)
Last modified 2yr ago