> 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/tworzenie-animacji-keyframes.md).

# Tworzenie animacji – @keyframes

Tworzenie animacji następuje przez regułę `@keyframes`. Zobaczmy jak wygląda przykładowa animacja.

```css
@keyframes changeColors
{
  0% { background-color: salmon; }
  50% { background-color: #263479; }
  100% { background-color: salmon; }
}
```

`changeColors` to nazwa animacji, którą nadajemy sami. Nastepuje zawsze po deklaracji `@keyframes`. W środku animacji, pomiędzy nawiasami klamrowymi, definiujemy, co będzie działo się w danych przedziałach czasowych animacji. W przypadku CSS przypisuje się to postępowi animacji, wyrażonemu w procentach, gdzie `0%` to początek animacji, zaś `100%` to jej koniec.

Animacja `changeColors` będzie zatem zmieniać kolory tła przycisku z pomarańczowego na granatowy, i na odwrót.

to jest link

Animację dodajemy do wybranego selektora lub selektorów CSS. Jak to się robi? Zerknijmy na kod odpowiedzialny za link.

```markup
<a href="" class="link">to jest link</a>
```

```css
a.link {
    padding: 10px 120px;
    background-color: salmon;
    color: #fff;
    animation-name: changeColors;
    animation-duration: 5s;
}
```

Dodaliśmy dwie nowe właściwości: `animation-name`, której wartością jest nazwa naszej animacji (`changeColors`), oraz `animation-duration`, czyli dowolny czas trwania animacji. Dzięki tym dwóm właściwościom dodaliśmy do naszego linku z klasą `link` stworzoną przez nas animację.

Animacje CSS posiadają jeszcze inne parametry. Poznajmy te najczęściej używane:

* `animation-name` – nazwa animacji
* `animation-duration` – czas trwania animacji
* `animation-timing-function` – funkcja czasowa animacji; mamy do dyspozycji te same funkcje, co w przypadku `transition`
* `animation-delay` – opóźnienie, czyli czas po jakim animacja zacznie działać
* `animation-direction` – kierunek rozpoczęcia i powtarzania się animacji, więcej o tej właściwości poniżej
* `animation-iteration-count` – liczba powtórzeń (iteracji) animacji
* `animation-fill-mode` – określa jakie cechy będzie miał animowany obiekty, gdy jego animacja będzie gdy animacja się zakończy i nie będzie powtarzana.
* `animation-play-state`– zatrzymywanie bądź wznowienie animacji, dozwolone wartości to `paused` (zatrzymana) i `running` (w toku)

### Kierunek animacji, czyli `animation-direction`

* `alternate` – animacja będzie powtarzać się w odwrotnym kierunku niż przy rozpoczęciu.

&#x20;\- \`reverse\` – animacja rozpoczynać się od miejsca, w którym się zakończyła.

* `alternate-reverse` – animacja będzie powtarzana od końca i będzie powtarzana w miejscu, w którym się zakończyła.

&#x20;\- \`normal\` – animacja będzie rozpoczynała się od początku, w miejscu, w którym się pierwotnie zaczęła.

### Skrótowy zapis

Tak samo jak w przypadku `transition`, do animacji również możemy zastosować skrót właściwości. Zamiast wypisywać oddzielnie kolejne właściwości, możemy wymienić je w jednej linii. `animation: 3s ease-in 1s 2 reverse both paused changeColors;`

Skrót ten tworzymy według wzorca: `animation: duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name`, podając przy tym odpowiednie wartości.