# 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 to jest link ``` ```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. \- \`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. \- \`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. --- # Agent Instructions: 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/tworzenie-animacji-keyframes.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.