CSS Animacije

Animacije na spletnih straneh, znajo spletno stran pošteno popestriti, čeprav s tem početjem lahko zmanjšamo hitrost nalaganja spletne strani. CSS omogoča animacijo HTML elementov, brez uporabe JavaScript ali Flash. Naredil sem nekaj primerov, da vidimo kaj lahko vse naredimo, in brez, kakšnega večjega truda.

CSS Animacije

V tem poglavju bomo izvedeli vse o izdelavi animacij, ki vsebujejo naslednje lastnosti:

  1. @keyframes
  2. ime animacije (ang. Animation-name)
  3. trajanje animacije (ang. Animation-duration)
  4. zakasnitev animacije (ang. Animation-delay)
  5. ponovitev štetja animacije (ang. Animation-iteration-count)
  6. smer animacije (ang. Animation-direction)
  7. časovna funkcija animacije (ang. Animation-timing-function)
  8. način polnjenja animacije (ang. Animation-fill-mode)
  9. animacija (ang. Animation)

Animacija omogoča, da se element spreminja iz enega sloga v drugega, in lahko spremenimo želeno vrednost CSS lastnosti. Ko želimo animacijo določiti, moramo pred tem določiti @keyframes.

@keyframes

Ko določimo CSS lastnost znotraj @keyframe bo element po določenem času spremenil lastnost ali obliko. Če želimo, da animacija deluje, jo moramo povezati z elementom.

Lastnost trajanja animacije animation-duration določa, kako dolgo bo animacija trajala. Če lastnost ni dodana, se animacija sploh ne bo začela, ker je privzeta vrednost nastavljena na 0. Lahko zapišemo vse v enem stavku, kot je to animation: ime animacije čas trajanja lastnost prehoda V kasnejših animacijah bomo opazili, da sem dodajal lastnost infinite, ki nam pove, kolikokrat bo animacija predvajanja, v primeru infinite je to neomejeno. Če lastnosti ne dodamo, se animacija predvaja enkrat.

Število ponovitev animacije

Lastnost določa, kolikokrat je potrebno animacijo predvajati.

number je številka, ki določa kolikokrat se naj animacija predvaja
infinite neskončno predvajanje animacije
initial začetno vrednost nastavi na privzeto
inherit deduje lastnost od nadrejenega elementa

Določitev krivulje hitrosti animacije

V prvem primeru sem dodal animacijo v hover efekt, kjer lahko vidimo vpisano animation: 5s easy-in-out kar pomeni, da animacija traja 5 sekund. Naslednja lastnost pa je prehod, ki določa hitrost prehoda med posameznimi deli. V spodnji tabeli vidimo vse lastnosti prehoda časovne funkcije:

ease določa učinek prehoda s počasnim zagonom, potem hitrim, in konča s počasnim zagonom
linear določa učinek prehoda z enako hitrostjo, od začetka do konca
ease-in določa učinek prehoda s počasnim zagonom
ease-out določa učinek prehoda s počasnim koncem
ease-in-out določa učinek prehoda s počasnim začetkom in koncem
cubic-bezier(n, n, n, n) omogoča, da določimo svoje vrednosti v funkciji

Način polnjenja

Lastnost animation-fill-mode določi slog za element, ko se animacija ne predvaja. To je lahko, preden se začne, ko se konča ali oboje. CSS animacije ne vplivajo na element pred predvajanjem prvega @keyframes elementa, ali zadnjega. Lastnost animation-fill-mode lahko preglasi to vedenje.

V vsaki animaciji sem uporabil ease-in-out, ki določa učinek prehoda s počasnim začetkom in koncem, pomeni, da se animacija konča in začne bolj lahkotno, kot brez te lastnosti. Uporabil sem tudi spremenljivko both, kjer animacija sledi pravilu, in razširja lastnosti naprej in nazaj v obe smeri. Poglejmo si, kar vse vrednosti:

backwards element bo dobil slogovne vrednosti, ki jih nastavi prvi element (odvisno od smeri animacije), in jo bo ohranil med zakasnitvijo animacije
both animacija sledi pravilu, in razširja lastnosti naprej in nazaj v obe smeri
forwards element bo ohranil slogovne vrednosti, ki jih nastavi zadnji element (odvisno od smeri in ponovitev animacije)
inherit lastnost podeduje od nadrejenega elementa
initial lastnost nastavi na privzeto vrednost
none animacija ne bo uporabila nobenega sloga za element, pred izvajanjem ali po njem

Metode 2D preoblikovanja

CSS pretvorbe nam omogočajo premikanje, vrtenje, spreminjanje velikosti in nagib elementov. V zgornji animaciji sem uporabil metodi translateX() in translateY() ki premakne predmet. Oglejmo si vse 2D metode v tabeli:

matrix(n, n, n, n, n, n) metoda matrix() združi vse 2D metode v eno, vsebuje 6 parametrov, ki nam omogočajo vrtenje, merjenje, premikanje in nagib matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
rotate(deg) metoda rotate() element vrti v smeri urinega kazalca, ali v nasprotni smeri, odvisno od vnosa
scale(x, y) metoda scale() poveča ali zmanjša velikost elementa, odvisno od parametrov za višino in širino
scaleX(x) metoda scaleX() poveča ali zmanjša višino elementa
scaleY(y) metoda scale() poveča ali zmanjša širino elementa
skew(x, y) metoda skew() poveča ali zmanjša višino elementa
skewX(x) metoda skewX() element nagne v osi X
skewY(y) metoda skew(Y) element nagne v osi Y
translate(x, y) metoda translate() premakne element iz njegovega trenutnega položaja

Metode 3D preoblikovanja

CSS podpira tudi 3D oblikovanje in si, kar poglejmo vse metode, ki jih lahko uporabimo v animacijah.

scaleX(x) določi transformacijo samo za os X
scaleY(y) določi transformacijo samo za os Y
scaleZ(z) določi transformacijo samo za os Z
scale3d(y, y, z) določi transformacijo
rotateX(kot) določa 3D rotacijo vzdolž osi X
rotateY(kot) določa 3D rotacijo vzdolž osi Y
rotateZ(kot) določa 3D rotacijo vzdolž osi Z
rotate3d(x, y, z, kot) določa 3D rotacijo
translateX(x) določa 3D prehod v osi X
translateY(y) določa 3D prehod v osi Y
translateZ(z) določa 3D prehod v osi Z
translate3d(x, y, z) določa 3D prehod
perspective(n) določi perspektivni pogled za 3D preoblikovan element
matrix3d(n, n, n, n, n, n, n, n, n, n, n, n, n, n, n, n) uporablja 4x4 matriko 16. vrednosti

Smer animacije

Lastnost animation-direction določa v katero smer naj se animacija predvaja, naprej, nazaj ali v nadomestnih ciklih.

normal je privzeta vrednost, kjer se animacija predvaja običajno
reverse animacija se predvaja v obratni smeri (vzvratno)
alternate animacija se najprej predvaja naprej, in potem še nazaj
alternate-reverse animacija se predvaja nazaj, in potem še naprej
initial lastnost nastavi na privzeto vrednost
inherit podeduje lastnost od nadrejenega elementa

Zakasnitev animacije

Lastnost animation-delay določi začetek animacije. Dovoljene so negativne vrednosti, in če uporabimo negativno številko, se bo animacija začela predvajati, kot da se že predvaja določeno število sekund.

Animacija pri pomikanju

Naslednji primer ni animacija, ampak bomo pogledali kako se element spreminja oziroma prikaže ob pomikanju čez spletno stran. V vsak element sem dodal tudi animacijo, tako da, ko se pomikamo po strani, se vsak element animira drugače.