Transformacje

normalny prostokąt

zmiana płaszczyzny

przesunięcie

obracanie

skalowanie

nachylanie

Opcje tranformacji
translate() //przesuwanie
rotate() //obrót
scaleX() scaleY() scale() //skalowanie
skewX() skewY() skew() //nachylanie
matrix() //zmiana płaszczyzny

Animacje

obrót i szybka cofka

kolorki

rozmiar

przesuniecie

skalowanie

Opcje animacji:
animation-name: mojaanimacja; //nazwa
animation-duration: 1s; //czas trwania
animation-timing-function: linear; //lub np. z dłuższym/krótszym wstępem/zakończeniem
animation-delay: 0.5s; //opóźnienie
animation-iteration-count: 2; //ilość powtórzeń
animation-direction: reverse; //kierunek odtwarzania
animation-fill-mode: forwards; //wartość ostatniej klatki np.powrót do klatki pierwszej
animation-play-state: running; //status animacji np. pauza

Przejścia

stałe

wolne - szybkie - wolne

wolny początek

wolny koniec

wolny początek i koniec

Opcje przejścia:
transition-delay //opóznienie
transition-duration //czas trwania
transition-property //informacja której wartosci css dotyczy przejscie
transition-timing-function //rodzaj tempa przejścia