Animacje CSS

Stronę tą wyświetlono już: 1667 razy

CSS rozwinął się do tego stopnia, że można w nim tworzyć animacje przejścia jednego stylu w drugi. Jest to możliwe dzięki zastosowaniu trzech nowych atrybutów:

transition-property - określa, dla których atrybutów danego elementu strony będzie tworzona animacja przejścia;
trensmision-duration - określa czas trwania animacji przejścia;
transition-timing-function - funkcja sterująca zmianą prędkości przejścia po czasie, dostępne są następujące opcje:
- ease (wartość domyślna) określa animację z wolnym startem, przyśpieszeniem i zwolnieniem animacji na końcu (można zastąpić za pomocą cubic-bezier(0.25,0.1,0.25,1));
- linear określa stałą prędkość animacji (można zastąpić za pomocą cubic-bezier(0,0,1,1));
- ease-in określa animację z wolnym startem i późniejszym jej przyspieszeniem (odpowiednik cubic-bezier(0.42,0,1,1))
- ease-out określa animację z powolnym jej zakończeniem (odpowiednik cubic-bezier(0,0,0.58,1));
- ease-in-out określa animację z powolnym startem i końcem (odpowiednik cubic-bezier(0.42,0,0.58,1));
- step-start odpowiednik steps(1, start);
- step-end odpowiednik steps(1, end);
- steps(int,start|end) - określa funkcję kroków animacji za pomocą dwóch parametrów: pierwszy - określa liczbę interwałów w funkcji; drugi - (opcjonalny) może przyjmować wartość start lub end (domyślny, gdy parametr zostanie pominięty) i określa punkt animacji, do którego ta powinna dążyć;
- cubic-bezier(n,n,n,n) - tworzy własną funkcję prędkości przejścia animacji. Wartości n mogą się wahać od 0 do 1;