Tematy: animation | @keyframes | animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-play-state
Dane w pigułce | |
Zastosowanie | Definiuje zbiorczo parametry animacji |
Dziedziczenie | nie |
Wartości | nazwa czas_trwania rozkład_czasowy opóźnienie liczba_powtórzeń kierunek |
Wartość domyślna | none 0 ease 0 1 normal |
Przykład | animation: mojaanimacja 5s infinite; |
Składnia JavaScript | object.style.animation="mojaanimacja 5s infinite" |
Aby zdefiniować animację, należy wpisać w definicji stylu animation: parametry.
Żadna z przeglądarek nie obsługuje czystego kodu, Chrome i Safari wymagają prefiksu -webkit-.
Uwaga: łatwo zauważyć podobieństwo możliwości zawartych w stylach Transitions i Animations. Niektórzy komentatorzy sugerują połączenie obu tych technik, inni z kolei dostrzegają zasadność ich rozdzielenia. Sprawa nie jest ostatecznie rozstrzygnięta.
Animacja składa się z dwóch bloków kodu:
- Pierwszy blok zawiera definicję samej animacji przypisanej do obiektu, określając jej nazwę, czas trwania, rozkład czasowy, opóźnienie startu, liczbę powtórzeń i kierunek. Dane te mogą zostać podane zbiorczo jako wartości parametrów
animation
lub też w osobnych wierszach, za pomocą bardziej szczegółowych poleceń, które opisują tutaj kolejne strony. - Drugi blok, czyli
@keyframes
, zawiera selektory poszczególnych klatek animacji obiektu oraz przypisane poszczególnym klatkom style.
Dopiero obie części powodują, że uzyskujemy ruch na ekranie.
Przykładowa definicja:
1. Definicja obiektu i animacji
div.pojemnik { width:100px; height:50px; background-color:gainsboro; animation: pulsowanie 3s infinite alternate; -webkit-animation: pulsowanie 3s infinite alternate; }
2. Definicja klatek
@keyframes pulsowanie { from {width:100px;} to {width:300px;} } @-webkit-keyframes pulsowanie { from {width:100px;} to {width:300px;} }
Po wprowadzenia pojemnika wyróżnionego tu klasą "pojemnik" uzyskamy efekt animacji - pulsowanie pojemnika między szerokością początkową 100 pikseli i końcową 300 pikseli, trwające 3 sekundy w jednym przebiegu, w nieskończoność, w obie strony:
Klip wideo dla użytkowników przeglądarek nieobsługujących animacji:
Interpretacja: Chrome i Safari (z prefiksem).