Animation podstawy

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.

1. Definicja obiektu i animacji

div.pojemnik {
	width: 100px;
	height: 50px;
	background-color: gainsboro;
	animation: pulsowanie 3s infinite alternate;
}

2. Definicja klatek

@keyframes pulsowanie {
	from {width:100px;}
	to {width:300px;}
}

properties (właściwości animacji)

animation-name (nazwa-animacji)
Definiuje nazwę klatki kluczowej (@keyframes), którą chcesz powiązać z selektorem.

animation-duration (czas trwania animacji)
Określa, ile sekund lub milisekund zajmuje animacja.

animation-timing-function (animacja-czas-funkcja)
Definiuje krzywą prędkości animacji.

animation-delay (opóźnienie animacji)
Definiuje opóźnienie przed rozpoczęciem animacji.

animation-iteration-count (liczba-iteracji-animacji)
Definiuje, ile razy powinna zostać odtworzona animacja.

animation-direction (kierunek animacji)
Definiuje, czy animacja ma być odtwarzana w odwrotnej kolejności w naprzemiennych cyklach.

animation-fill-mode (tryb wypełniania animacji)
Definiuje, jakie wartości są stosowane przez animację poza czasem jej wykonywania.

animation-play-state (animacja-stan-odtwarzania)
Definiuje, czy animacja jest uruchomiona, czy wstrzymana.

initial
Ustawia tę właściwość na jej wartość domyślną.

inherit
Dziedziczy tę właściwość z elementu nadrzędnego.

właściwości animacji – wzór

div.wzor {
    animation-name: example;
    animation-duration: 5s;
    animation-timing-function: linear;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

albo:

div.wzor {
    animation: example 5s linear 2s infinite alternate;
}