> 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:
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-2/wlasciwosc-transition.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.