Składnia @keyframes i właściwość animation

Animacje CSS umożliwiają wieloetapowe zmiany właściwości w czasie za pomocą @keyframes. W przeciwieństwie do przejść animacje rozpoczynają się automatycznie lub po dodaniu klasy i obsługują złożone sekwencje.

Etapy animacji definiuje się za pomocą wartości procentowych (od 0% do 100%) albo słów kluczowych from/to:

Animację przypisuje się do elementu za pomocą skróconej właściwości animation lub jej właściwości składowych:

Odwołuje się do reguły @keyframes za pomocą jej nazwy:

Określa czas trwania jednego cyklu animacji:

W przypadku złożonych, wieloetapowych animacji należy używać klatek kluczowych wyrażonych wartościami procentowymi:

Każdy etap klatek kluczowych może jednocześnie animować wiele właściwości:

Funkcję wygładzania można ustawić dla każdego etapu klatek kluczowych osobno. Kontroluje ona przejście między poszczególnymi punktami animacji, a nie całą animację.

Do jednego elementu można przypisać wiele animacji, używając wartości rozdzielonych przecinkami:

Animacje można dynamicznie wstrzymywać i wznawiać:

Należy wybrać właściwe rozwiązanie:

• Transition: dwa stany, uruchamiane przez zmianę stanu, proste
• Animation: wiele etapów, samoczynne uruchamianie, zapętlanie i większa kontrola

Które słowo kluczowe @keyframes oznacza stan początkowy animacji?

Etapy animacji definiuje się za pomocą @keyframes, używając punktów from/to lub wartości procentowych. Animację stosuje się za pomocą skróconej właściwości animation, określając nazwę, czas trwania, funkcję wygładzania i tryb wypełnienia. Wiele animacji rozdziela się przecinkami. Przejść należy używać do prostych zmian między dwoma stanami, a animacji — do złożonych sekwencji.