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.

<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ę?

<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;

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:

Animacja