Animacje CSS
Animacje CSS zostały wprowadzone w trzeciej wersji języka kaskadowych arkuszy stylów i są wspierane przez przeglądarki od następujących wersji:
- Google Chrome 4.0 (do wersji 43.0 wymagany przedrostek -webkit-)
- Mozilla Firefox 5.0 (do wersji 16.0 wymagany przedrostek -moz-)
- Opera 12.0 (do wersji 15.0 wymagany przedrostek -o-, do wersji 30.0 wymagany przedrostek -webkit-)
- Internet Explorer 10.0
- Microsoft Edge
- Safari 4.0 (do wersji 9.0 wymagany przedrostek -webkit-)
Animacje CSS wywołuje się za pomocą funkcji animation
, której zadaniem jest zmiana właściwości animowanego obiektu. Podstawowa składnia funkcji to:
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
Poszczególne parametry funkcji określają:
name (keyframename | none | initial | inherit)
Identyfikator funkcji, która ma zostać wywołana po uruchomieniu animacji.
duration (time | initial | inherit)
Czas trwania pojedynczego, pełnego cyku animacji.
timing-function (linear | ease | ease-in | ease-out | ease-in-out | step-start | step-end | steps(int,start | end) | cubic-bezier(n,n,n,n) | initial | inherit)
Funkcja określająca szybkość animacji w poszczególnych jej krokach, na przykład:
- stała prędkość podczas całej animacji (linear),
- wolne rozpoczęcie, następnie przyspieszenie i zwolnienie przed końcem animacji (ease),
- powolne rozpoczęcie, szybkie zakończenie (ease-in),
- szybkie rozpoczęcie, powolne zakończenie (ease-out),
- wolne rozpoczęcie i zakończenie, szybki środek animacji (ease-in-out),
delay (time | initial | inherit)
Opóźnienie – czas, jaki musi upłynąć przed rozpoczęciem animacji.
iteration-count (number | infinite | initial | inherit)
Liczba określająca ile razy animacja ma się wykonać.
direction (normal | reverse | alternate | alternate-reverse | initial | inherit)
Sposób wykonania animacji, na przykład:
- standardowo – od początku do końca (normal),
- odwrotnie – od końca do początku (reverse),
- naprzemiennie – od początku do końca, a potem od końca do początku (alternate),
- naprzemiennie odwrotnie – od końca do początku, a potem od początku do końca (alternate-reverse).
fill-mode (none | forwards | backwards | both | initial | inherit)
Parametr określa co ma się stać z animacją, gdy zostanie ona ukończona, na przykład:
- ma wrócić do stanu początkowego (backwards),
- ma przejść do stanu w którym się zakończyła (forwards).
play-state (paused | running | initial | inherit)
Parametr definiuje aktualny stan animacji, na przykład:
- działająca (running)
- wstrzymana (paused)
Dla tak przygotowanej właściwości animation
, należy zdefiniować funkcję @keyframes name
, która będzie określać stan obiektu w poszczególnych krokach animacji. Na przykład:
@keyframes rainbow {
0% {
background-color: red;
}
10% {
background-color: orange;
}
20% {
background-color: yellow;
}
30% {
background-color: lime;
}
40% {
background-color: green;
}
50% {
background-color: cyan;
}
60% {
background-color: blue;
}
70% {
background-color: purple;
}
80% {
background-color: violet;
}
90% {
background-color: pink;
}
100% {
background-color: red;
}
}
Przedstawiona powyżej funkcja animacji będzie zmieniać tło wskazanego obiektu w kolejnych jednostkach czasu.
Bieżący artykuł „Animacje CSS – jak skutecznie animować obiekty HTML” jest kontynuacją wcześniej opublikowanego wpisu pod tytułem: CSS3 Preloaders – niestandardowy pasek ładowania imitujący wczytywanie strony internetowej.
Poniżej przedstawiono przykłady wykorzystania animacji CSS na stronach internetowych w postaci preloaderów, czyli animacji symulujących wczytywanie się strony internetowej.
Przykład 7
Przechodząc do praktycznych przykładów animacji CSS przedstawiono preloader, który wykorzystując zmianę właściwości box-shadow
obiektu, imituje proces wczytywania się strony internetowej.
Przykład 8
Bazując na poprzednim przykładzie do animacji dodano transformację transform: rotate(angle)
obracającą obiekt wokół własnej osi oraz dodatkowo, stałe wcześniej piksele zamieniono na jednostkę em
ułatwiającą modyfikację rozmiaru preloadera. Wartości cienia w poszczególnych krokach dostosowano do potrzeb bieżącej animacji.
Przykład 9
W ostatnim przykładzie do animacji wykorzystano selektory :before
i :afeter
oraz dodano opóźnienie animacji animation-delay
, które powoduje nierównomierne zmiany właściwości obiektu.
Komentarze: 4
Max
17 stycznia 2016 o 18:05
Dobry tutorial. Polecam.
Anka
15 grudnia 2017 o 21:28
Przydałby się troszeczkę prostsze przykłady. Nie wiele z nich rozumiem.
blockchain
14 sierpnia 2018 o 08:36
fajna sprawa. Do tej pory męczyłem się z js, żeby animować loadery
Bombelek500+
15 maja 2019 o 18:33
To wygląda na dobrą alternatywę dla Java Scriptu, myślę że skorzystam. Pozdrawiam