Kurs języka HTML i CSS

Tematy: animation | @keyframes | animation-name | animation-duration | animation-timing-function | animation-delay | animation-iteration-count | animation-direction | animation-play-state

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).