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;
}
animation- { name | duration | timing-function | delay | iteration-count | direction }