Comment on page
Tworzenie animacji – @keyframes
Tworzenie animacji następuje przez regułę
@keyframes
. Zobaczmy jak wygląda przykładowa animacja.@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.
<a href="" class="link">to jest link</a>
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 animacjianimation-duration
– czas trwania animacjianimation-timing-function
– funkcja czasowa animacji; mamy do dyspozycji te same funkcje, co w przypadkutransition
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żejanimation-iteration-count
– liczba powtórzeń (iteracji) animacjianimation-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 topaused
(zatrzymana) irunning
(w toku)
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.
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.