> For the complete documentation index, see [llms.txt](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-2/wlasciwosc-transition.md).
# 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
```markup
to jest link
```
```css
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
```markup
to jest link
```
```css
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:
```css
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.
```css
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:
```css
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](http://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 : || || || `
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:
