Kurs języka HTML i CSS

Poradnik webmastera

  • Zwiększ rozmiar czcionki
  • Domyślny  rozmiar czcionki
  • Zmniejsz rozmiar czcionki
CSS3 - animacje

CSS3 - animation

Email Drukuj PDF

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

 

CSS. Tworzenie nowoczesnych stron WWW.

CSS3. Tworzenie nowoczesnych stron WWW
(czerwiec 2012)

HTML5 i CSS3. Standardy przyszłości

HTML5 i CSS3
Standardy przyszłości

CSS3. Szybki start. Wydanie V

CSS3. Szybki start.
Wydanie V