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.
V tem poglavju bomo izvedeli vse o izdelavi animacij, ki vsebujejo naslednje lastnosti:
- @keyframes
- ime animacije (ang. Animation-name)
- trajanje animacije (ang. Animation-duration)
- zakasnitev animacije (ang. Animation-delay)
- ponovitev štetja animacije (ang. Animation-iteration-count)
- smer animacije (ang. Animation-direction)
- časovna funkcija animacije (ang. Animation-timing-function)
- način polnjenja animacije (ang. Animation-fill-mode)
- 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.
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.
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 |
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 |
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 |
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 |
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 |
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 |
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.
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.