Upload
others
View
2
Download
0
Embed Size (px)
Citation preview
Tjaša Šošter
ANIMACIJA Z UPORABO JEZIKA CSS 3
Diplomsko delo
Maribor, avgust 2012
ANIMACIJA Z UPORABO JEZIKA CSS 3
Diplomsko delo
Študentka: Tjaša Šošter
Študijski program: univerzitetni študijski program
Informatika in tehnologije komuniciranja
Smer: Informacijski sistemi
Mentor: doc. dr. HÖLBL MARKO, univ. dipl. inž. rač. in inf.
Lektorica: Natalija Sinkovič, profesorica slovenščine
i
ii
ZAHVALA
Zahvaljujem se mentorju, doc. dr. Marku Hölblu za
pomoč in vodenje pri opravljanju diplomskega dela.
Posebna zahvala velja staršem, ki so mi omogočili
študij.
iii
Animacija z uporabo jezika CSS 3
Ključne besede: CSS 3, animacija, spletno oblikovanje, splet
UDK: 004.92:004.777(043.2)
Povzetek
Diplomsko delo govori o spletnih animacijah izdelanih z uporabo jezika CSS 3. V
diplomskem delu smo pregledno predstavili tehnologijo CSS in novosti v verziji CSS 3.
Opisali smo elemente CSS 3 modula Animations, ki omogočajo izgradnjo spletnih
animacij. Preverili smo kakšna je podpora različnih elementov CSS 3 modula Animations
v popularnejših brskalnikih. V praktičnem delu diplomske naloge smo opisali razvoj
spletne animacije CSS 3 cirkus. Predstavili smo, kako lahko z uporabo različnih CSS
lastnosti dosežemo različne učinke animacije, kot so gibanje, razteg in skrčitev, pojemanje
ter povečava in oddaljevanje. Preizkusili in predstavili smo delovanje orodja Sencha
Animator.
iv
CSS 3 Animation
Key words: CSS 3, animation, web design , web
UDK: 004.92:004.777(043.2)
Abstract
This diploma is about web animations that are build with CSS 3. In this work we presented
CSS technology and innovations in version CSS 3. We described the elements of CSS 3
Animations module, which enables building web animations and also checked out the
support of various elements in more popular browsers. In the practical part of the paper
we described the development of web CSS 3 animation called CSS 3 Circus. We
presented the use of the various CSS properties in order to achieve different animation
effects, such as movement, stretching and squeezing, fading or zooming in and out. In the
end we presented the way to build animation with a tool called Sencha Animator.
v
KAZALO
1 UVOD .............................................................................................................. 1
2 CSS ................................................................................................................. 3
2.1 CSS 3 ..................................................................................................................................... 4
2.2 CSS 3 Animations modul ..................................................................................................... 5
2.3 Pravilo glavne slike .............................................................................................................. 5
2.4 Elementi ................................................................................................................................. 6
3 PODPORA BRSKALNIKOV ........................................................................... 8
4 IZDELAVA ANIMACIJE ............................................................................... 10
4.1 Načrtovanje ......................................................................................................................... 10
4.2 Izdelava ................................................................................................................................ 11
4.2.1 Ozadje .......................................................................................................................... 11
4.2.2 Pozicija in vrstni red elementov .................................................................................... 12
4.2.3 Gibanje ......................................................................................................................... 12
4.2.4 Rotacija ......................................................................................................................... 14
4.2.5 Približevanje in oddaljevanje ........................................................................................ 15
4.2.6 Razteg in skrčitev ......................................................................................................... 17
4.2.7 Ponovitev animacije ...................................................................................................... 17
4.2.8 Časovna funkcija in hitrost animacije ........................................................................... 20
4.2.9 Dodatne funkcionalnosti ............................................................................................... 20
5 PRIPOMOČKI PRI IZDELAVI ANIMACIJE ................................................... 23
5.1 Orodje -prefix-free .............................................................................................................. 23
5.2 Orodja za animacijo............................................................................................................ 25
6 SKLEP ........................................................................................................... 28
7 VIRI ................................................................................................................ 29
vi
KAZALO SLIK
Slika 2.1: Sintaksa CSS stila [2] ......................................................................................................... 3
Slika 2.2: Tri stopnje animacije [5]...................................................................................................... 7
Slika 4.1: Slika žonglerja .................................................................................................................. 10
Slika 4.2: Pozicija rumene žogice v animaciji ................................................................................... 13
Slika 4.3: Premik glave s pravilom za rotacijo .................................................................................. 15
Slika 4.4: Približevanje in rotacija opice ........................................................................................... 16
Slika 4.5: Prikaz raztega in skrčitve žoge ......................................................................................... 17
Slika 4.6: Animacija zavese .............................................................................................................. 19
Slika 4.7: Naslov z uporabo različnih pisav ...................................................................................... 21
Slika 5.1: Glavno okno programa Sencha Animator [13] ................................................................. 25
Slika 5.2: Različne pozicije balona ................................................................................................... 26
Slika 5.3: Lastnosti za skrčitev/razteg in rotacijo krogle ................................................................... 27
KAZALO TABEL
Tabela 2.1: Animation Properties[8] ................................................................................................... 6
Tabela 3.1: Podpora CSS 3 pravil za animacijo ................................................................................. 9
KAZALO PROGRAMSKE KODE
Programska koda 2.1: Primer @keyframe elementa [5] .................................................................... 5
Programska koda 2.2: Primer kode za animacijo div elementa [5] .................................................... 7
Programska koda 4.1: CSS pravilo za uporabo dveh animacij ........................................................ 12
Programska koda 4.2: Pravilo za gibanje oz. animacijo žogic pri žonglerju .................................... 13
Programska koda 4.3: Pravilo za premik navzdol ............................................................................ 14
Programska koda 4.4: Pravilo z uporabo rotacije ............................................................................ 14
Programska koda 4.5: Pravilo z uporabo lastnostjo transform za povečavo in rotacijo ................... 16
Programska koda 4.6: Pravilo za razteg/skrčitev žoge .................................................................... 17
Programska koda 4.7: Pravilo glavne slike, kjer se animacija ponavlja v neskončnost ................... 18
Programska koda 4.8: Pravilo, kjer se animacija ponovi dvakrat v alternativni smeri ..................... 19
Programska koda 4.9: Pravilo za uvoz in uporabo različnih pisav ................................................... 20
Programska koda 4.10: Del kode za predvajanje glasbe ................................................................. 22
Programska koda 5.1: CSS pravilo brez uporabe predpon ............................................................. 24
Programska koda 5.2: CSS pravilo ob pregledu strani v brskalniku Firefox z orodjem Firebug ...... 24
Animacija z uporabo jezika CSS 3
1
1 UVOD
Gibljive slike so že od nekdaj privlačile ljudi. Enako je tudi na spletu, kjer grafično bolj
dodelana spletna stran privabi več ljudi. Animacija na spletni strani ponuja boljše in bolj
inovativne možnosti za oglaševanje. Prav tako so spletne strani atraktivnejše, če
vsebujejo animirane menije, dinamično pomoč pri navigaciji spletne strani ter animirane
predstavitve, ki izdelke in storitve bolj približajo potencialnim uporabnikom. Dobro
zgrajena spletna stran, z uporabo spletne animacije pomeni večje zadovoljstvo
uporabnikov in s tem tudi večji dobiček za podjetje.
Za dodajanje animacij na spletne strani obstaja več platform. Kljub obsežnemu seznamu
se spletni oblikovalci v preteklosti največkrat odločali za JavaScript ali JQuery in Adobe
Flash. Zaradi tega je za spletne strani veljalo, da so sestavljene iz treh plasti: vsebina
(HTML), predstavitev (CSS) in obnašanje (JavaScript) ter da se te tri plasti med seboj ne
mešajo. Ta linija med predstavitvijo in obnašanjem je sicer izginila s pojavitvijo CSS 3
animacij.
Namen diplomskega dela je predstaviti elemente za izdelavo CSS 3 animacije, ugotoviti,
kakšne so prednosti izdelave animacije s pomočjo jezika CSS 3 v primerjavi z drugimi
pristopi in tehnologijami (npr. Flash in JavaScript) in kakšna je podpora brskalnikov.
Glavni cilji, ki jih želimo doseči z izdelavo diplomske naloge, so torej pridobiti znanje o
CSS 3, predvsem o modulu za izdelavo animacij in se naučiti izdelati takšno animacijo.
Pri izdelavi animacije se bomo omejili na uporabo elementov animacije, ki so podprti v
vsaj dveh popularnejših brskalnikih (Mozilla Firefox in Google Chrome). Pri testiranju
podpore v brskalnikih bomo primerjali 4 najpopularnejše – Mozzila Firefox, Google
Chrome, Safari in Internet Explorer.
V prvem delu diplomske naloge bomo predstavili kaj je CSS oz. kaskadna stilska predloga
in kakšne so novosti v verziji, t. i. CSS 3. Na kratko bomo opisali, kako poteka izgradnja
animacije s t. i. pravilom glavne slike in kateri so gradniki ki se uporabljajo za izgradnjo
Animacija z uporabo jezika CSS 3
2
animacije. V nadaljevanju bomo povzeli tudi, kakšna je podpora brskalnikov. V
eksperimentalnem delu bo predstavljen prikaz poteka izdelave take animacije in
podrobnejša predstavitev gradnikov, ki se uporabljajo za izdelavo čim bolj realistične in
privlačne animacije. V zadnjem delu bomo predstavili tudi pripomočke za izgradnjo
animacij, med njimi tudi program, ki omogoča izgradnjo brez »tehničnega znanja«.
Animacija z uporabo jezika CSS 3
3
2 CSS
Pri izgradnji animacije uporabljamo označevalni jezik Hyper Text Markup Language (sl.
jezik za označevanje nadbesedila) krajše HTML in jezik Cascading Style Sheets (sl.
kaskadne stilske predloge) krajše CSS. HTML je jezik, ki poskrbi za strukturo dokumenta
z organizacijo elementov v odstavke, sezname ipd., medtem ko CSS poskrbi za privlačno
podobo dokumenta [1].
Delovanje jezika CSS je dokaj enostavno. V bistvu gre le za pravilo, ki pove spletnemu
brskalniku, kako prikazati določen element na spletni strani – npr. spremeniti barvo
naslova v modro, narisati rdečo obrobo okoli slike … Posamezno stilsko pravilo je
sestavljeno iz dveh glavnih delov, kot prikazuje slika 2.1, selektorja, ki določa element, na
katerega se stilska pravila nanašajo ter deklaracijskega bloka, v katerem so zapisane
lastnosti, s pomočjo lastnosti (ang. property) elementov (npr. color – barva) in njihovih
vrednosti (ang. value) [1].
Slika 2.1: Sintaksa CSS stila [2]
Za selektor lahko uporabljamo [3]:
HTML ime za element, kot prikazuje slika 2.1,
id ime, ali
class ime.
Skupino več stilskih pravil imenujemo stilska predloga (ang. style sheet). Ta je lahko
definirana znotraj HTML strani, ali pa v posebnem dokumentu, ki ga uvozimo s pomočjo
povezave [1].
Animacija z uporabo jezika CSS 3
4
2.1 CSS 3
CSS 3 je najnovejša različica jezika za stilske predloge. Gre za nadgradnjo različice CSS
2.1, ki ima dodane nove funkcionalnosti. Pri večini novih funkcionalnostih ne gre za
ustvarjanje novih učinkov, ampak za uporabo že poznanih efektov spletnega oblikovanja
(kot so senčenje, animacija …) na nov način, ki je bolj uporaben in prilagodljiv od tehnik,
ki smo jih uporabljali v zadnjem desetletju [4].
Za razliko od predhodnika CSS 3 ni več enovita specifikacija, ampak je razdeljena na več
modulov. Vsak izmed njih je specifičen za določeno področje, kot so barva, ozadje ali
animacija [4]. Taka razdelitev omogoča, da uporabljamo CSS 3 že pred koncem razvoja,
saj so, medtem ko so nekateri moduli že popolnoma podprti, drugi šele v fazi razvoja [5].
V celotni specifikaciji je torej več kot 50 modulov. Med pomembnejše spadajo moduli, kot
so Backgrounds and Borders (sl. ozadja in obrobe), ki omogoča uporabo zaobljenih
robov, senčenje in uporabo slik za obrobo brez programov, kot je Adobe Photoshop.
Vsebuje pa tudi več lastnosti, ki omogočajo večji nadzor nad elementom ozadja.
Lastnosti, ki jih ponuja modul 2D/3D Transformations (sl. 2D/3D transformacije) omogočijo
razvijalcu da premika, povečuje, vrti in razteza različne HTML elemente. Modul Text
Effects (sl. besedilni učinki), omogoča dodajanje učinka senčenja besedilu. S Multiple
Column Layout modulom, lahko besedilo razporedimo v več stolpcev in v besedilu s
pomočjo lastnosti iz modula Fonts (sl. Pisave) uporabimo tudi pisave, ki sicer niso
nameščene na računalniku [6][7]. Modula Transitions (sl. prehodi) in Animations (sl.
animacija) omogočata dodajanje animacije statičnih HTML elementom [5].
Modul za prehode omogoča izvedbo enostavnejših animacij, vendar je nekoliko omejen.
Prehod se zgodi, ko se spremeni vrednost lastnosti, zato je čas začetka in konca odvisen
od te spremembe. Obenem modul za prehode ponuja malo možnosti nastavitev poteka
animacije. Za razliko od modula za prehode pa modul za animacijo omogoča avtorju več
svobode pri oblikovanju, zato se uporablja pri kompleksnejših animacijah [8].
Animacija z uporabo jezika CSS 3
5
2.2 CSS 3 Animations modul
Modul za animacijo avtorju omogoča spreminjanje CSS vrednosti skozi čas s pomočjo
pravila glavne slike. Prav tako je z uporabo različnih CSS lastnosti omogočena kontrola
nad ponavljanjem animacije, njenim začetkom, hitrostjo … [8].
2.3 Pravilo glavne slike
Prvi korak pri izdelavi animacije je definiranje slik animacije t. i. keyframe.
Najenostavnejše animacije vsebujejo samo dve sliki – začetno in končno, medtem ko bolj
zapletene vsebujejo tudi po več slik med začetno in končno sliko.
Pri izdelavi CSS animacij definiramo glavne slike s pomočjo značke @keyframes, katere
sintakso prikazuje programska koda 2.1
@keyframes expand
{
from { border-width: 10px }
50% { border-width: 1px }
to { border-width: 1px;
height: 120px;
width: 150px; }
}
Programska koda 2.1: Primer @keyframe elementa [5]
Za značko - @keyframe najprej definiramo ime animacije oz. identifikator, ki se uporablja
za klic animacije in se znotraj stilske predloge ne sme ponoviti. Sledijo vrednost keyframi
oz. slike. Te določajo pozicijo različnih slik znotraj trajanja animacije. Vrednost pozicije se
določa z odstotki, torej z vrednostmi od 0 % do 100 %. Poljubno sicer lahko zamenjamo 0
% z besedo from in 100 % z besedo to. Pri posamezni imamo lahko poljubno število
pozicij, dokler imajo le-te edinstveno vrednost. Vsaka pozicija vsebuje CSS pravila, ki se
nanašajo na določen element v določenem stanju animacije [5].
Animacija z uporabo jezika CSS 3
6
2.4 Elementi
Po definiciji glavnih slik je naslednji korak njihova povezava z elementi, ki jih želimo
animirati. Za to uporabimo elemente modula CSS 3 Animations, ki so prikazani v tabeli
2.1.
Tabela 2.1: Animation Properties[8]
CSS lastnost Opis
animation-name Identificira ime animacije, ki jo želimo določiti našemu elementu.
animation-duration Definira koliko časa (sekund ali milisekund) se izvaja en krog animacije.
animation-timing-function Definira hitrostno krivuljo animacije. Uporabimo lahko eno izmed že definiranih vrednosti.
animation-delay Identificira začetek animacije in omogoča, da se animacije začne z zakasnitvijo. Pri prevzeti vrednosti 0 s se animacija začne takoj.
animation-iteration-count Določuje število ponovitev krogov animacije.
animation-direction Definira, kako naj se predvaja animacija.
animation-fill-mode Definira, kakšne vrednosti zavzame element, ko je aplikacija končana.
animation-paly-state Definira stanje animacije (poteka ali pavza).
Vrednosti uporabimo znotraj selektorja elementa, ki ga želimo animirati. Prav tako lahko
uporabimo okrajšano vrednost animation, kot je prikazano v programski kodi 2.2. Rezultat
animacije je prikazan na sliki 2.2.
Animacija z uporabo jezika CSS 3
7
/* element ki ga animiramo */
div {
border: 4px solid black;
height: 100px;
width: 100px;
box-sizing: border-box;
animation: expand 6s ease 0 infinite alternate;
}
@keyframes expand
{
from { border-width: 4px }
50% { border-width: 12px }
to { border-width: 4px;
height: 130px;
width: 150px; }
}
Programska koda 2.2: Primer kode za animacijo div elementa [5]
Slika 2.2: Tri stopnje animacije [5]
Animacija z uporabo jezika CSS 3
8
3 PODPORA BRSKALNIKOV
Zadnje verzije brskalnikov imajo zelo dobro podporo za CSS, vključno z različico CSS 3.
To pomeni, da v zadnjih verzijah namiznih in mobilnih brskalnikov delujejo večinoma vse
nove funkcionalnosti, ki jih najdemo v različnih modulih CSS 3. Zaradi hitrega napredka
tehnologije, vse večje konkurence na področju spletnih brskalnikov in vse večjih zahtev
uporabnikov se razvijalci namreč trudijo vključiti nove funkcionalnosti veliko hitreje kot
včasih. Obenem so nove različice toliko izboljšane, da se pojavlja tudi vedno manj
hroščev [9].
Čeprav večina brskalnikov podpira CSS 3, vsi izmed njih podpirajo modul za animacije
zgolj poskusno, zaradi česar je treba pri animiranju uporabiti ustrezne predpone [8].
Prvi so CSS 3 animacijo začeli podpirati brskalniki, ki uporabljajo odprtokodni izvajalni
sistem Webkit. Med te spadajo namizni brskalniki Chrome in Safari ter mobilni brskalniki
iOS Safari, Android Browser, Blackberry Browser ter Chrome in Firefox za operacijski
sistem Android, ki vsi v zadnjih verzijah podpirajo animacije. Seveda vsi našteti webkit
brskalniki za delovanje animacije zahtevajo predpono -webkit- [8].
Z verzijo 5.0, ki je bila na voljo za množično uporabo junija 2011, je animacijo začel
podpirati tudi spletni brskalnik Mozzila Firefox. Pri njem za pravilen prikaz potrebujemo
predpono -moz- [10] [8]. Animacijo podpira tudi namizni brskalnik Opera z zadnjo verzijo
(verzija 12.0), vendar pa animacije ne podpira noben izmed njenih mobilnih brskalnikov
Opera Mini ali Opera Mobile. Predpona, ki se uporablja pri Operi je -o- [11].
Od najbolj razširjenih brskalnikov je edini Internet Explorer v trenutni verziji 9, ki ne
podpira animacije. Napovedana je sicer podpora animaciji v njegovi naslednji verziji 10,
sintaksa pa bi naj delovala s predpono -ms- ali celo brez nje [12].
Na zadnjih verzijah najpopularnejših spletnih brskalnikov smo izvedli tudi primerjavo
podpore CSS 3 Animation modula, ki jo prikazuje tabela 3.1. Primerjavo smo izvedli s
Animacija z uporabo jezika CSS 3
9
pomočjo testa za podporo CSS 3, ki ga najdemo na spletni strani: http://CSS
3test.com/#CSS 3-animations.
Tabela 3.1: Podpora CSS 3 pravil za animacijo
Firefox 14.0 Chrome 21.0 Safari 5.11 Opera 12
@keyframe podpira podpira podpira podpira
animation-name podpira podpira podpira podpira
animation-duration podpira delno podpira 2 delno podpira 3 podpira
animation-timing-
function podpira podpira podpira podpira
animation-delay podpira podpira podpira podpira
animation-
iteration-count podpira podpira delno podpira 4 podpira
animation-direction delno podpira 5 podpira delno podpira 6 delno podpira 7
animation-fill-mode podpira podpira podpira podpira
animation-paly-
state podpira podpira podpira podpira
1 Testirano na operacijskem sistemu Windows
2 Ne podpira vnosa negativih vrednosti (npr. -1s)
3 Ne podpira vnosa negativih vrednosti (npr. -1s)
4 Ne podpira vnosa decimalne vrednosti (npr. 4.35)
5 Ne podpira vrednosti reverse in alternate-reverse
6 Ne podpira vrednosti reverse in alternate-reverse
7 Ne podpira vrednosti reverse in alternate-reverse
Animacija z uporabo jezika CSS 3
10
4 IZDELAVA ANIMACIJE
Z namenom preizkusiti različne možnosti izgradnje animacije z jezikom CSS 3 smo se
lotili izdelave preproste animacije na temo cirkusa. Potek je predstavljen v podpoglavjih.
4.1 Načrtovanje
Ko smo določili idejo animacije, smo si najprej zamislili načrt, kako bo animacija sploh
potekala. Animacijo smo zgradili tako, da smo animirali HTML elemente, ki so vsebovali
različne slike cirkusa. V tej fazi je bilo torej treba izdelati in pridobiti vse ustrezne slike, ki
so bile kasneje uporabljene kot ozadje div elementov. Slike ozadij, z izjemo prvega, smo
narisali s pomočjo orodja Adobe Photoshop. Za druge elemente – klovne in živali (ter prvo
ozadje), pa smo uporabili vektorske slike, ki smo jih ustrezno razrezali. Na Slika 4.1 je
prikazana vektorska slika žonglerja, ki je sestavljen iz treh delov – trup ter leva in desna
roka. Podobno smo na dva dela (trup in glava) razrezali tudi tjulnja.
Slika 4.1: Slika žonglerja
Za pomoč pri izgradnji in določanju časovnih razmikov, kdaj se kateri element pojavi v
animaciji, smo si pripravili tudi enostavno časovno črto. Ko smo imeli pripravljene vse slike
in okvirni načrt, kako bo animacija potekala, smo se lotili animiranja.
Animacija z uporabo jezika CSS 3
11
4.2 Izdelava
V fazi izdelave smo najprej izdelali posebej animacije za žonglerja, tjulnja, nilskega konja
in opico. Na koncu smo vse te animacije skupaj povezali v eno datoteko z ustreznimi
ozadji, prehodi in časovnimi zakasnitvami. V naslednjih podpoglavjih bomo predstavili,
kako smo se lotili izgradnje posameznih elementov.
4.2.1 Ozadje
Na začetku smo ustvarili animacijo, ki je vsebovala samo ozadja in prehode, saj ustrezno
ozadje postavi animacijo v pravilni kontekst. Uporabljena so bila različna ozadja, ki so
ustvarjala vzdušje cirkusa znotraj animacije. Za povezovanje ozadij smo uporabili zaveso.
Za vsako ozadje smo uporabili svoj div element z ustreznim ozadjem, saj žal znotraj
@keyframe pravila ne deluje CSS vrednost background-image, ki bi omogočala
zamenjavo slike ozadja. Prikaz ozadja smo nato kontrolirali s pomočjo lastnosti animation-
delay in lastnostjo opacity8. Z elementom opacity lahko nastavljamo prosojnost različnih
elementov, v našem primeru smo ga uporabili za ozadje spletne strani. Z njim smo izvedli
tudi učinek pojemanja, ki smo ga vključili na koncu animacije.
Vsakemu uporabljenemu elementu lahko dodelimo več pravil in jih tako uporabimo
večkrat. V naši animaciji smo div element ozadje1, uporabili kot prvo in zadnje ozadje
animacije. To smo storili tako, da smo pri CSS pravilu za ozadje1 pri določanju imena
animacije uporabili dve različni @keyframes pravili, kar lahko vidimo v programski kodi
4.1. Obenem smo določili še različen čas trajanja in čas začetka animacije.
8 Lastnost iz modula CSS 3-Color Properties, ki omogoča nastavitve prosojnosti elementa.
Vstavimo lahko decimalne vrednosti od 0 (prosojno) do 1 (ne prosojno).
Animacija z uporabo jezika CSS 3
12
#cirkus #ozadje1 {
height: 500px;
width: 800px;
position: absolute;
background-image: url(slike/ozdaje1.png);
background-position: center bottom;
background-repeat: no-repeat;
opacity: 0;
background-size: cover;
overflow: hidden;
z-index: 1;
animation-name: prvo_ozadje, ozadje_zadnje;
animation-duration: 25s, 10s;
animation-iteration-count: 1;
animation-delay: 0s, 63s;
}
Programska koda 4.1: CSS pravilo za uporabo dveh animacij
4.2.2 Pozicija in vrstni red elementov
Na vsako ozadje smo nato postavili animirane figure - klovne, živali in balone. Figure so
različni div elementi, ki so postavljeni absolutno glede na kontejner. V našem primeru je to
div element cirkus, ki je postavljen relativno na spletno stran. Vrstni red elementov smo
določili s CSS lastnostjo z-index. Tisti element, ki ima večjo vrednost z-index se torej
pojavi pred ostalimi elementi.
Nato smo te elemente ustrezno animirali z uporabo različnih CSS lastnosti, s čimer smo
dosegli učinke premikanja, rotacije, skrčitve in raztega ter približevanja in oddaljevanja.
4.2.3 Gibanje
Premikanje elementov oz. gibanje smo implementirali na dva različna načina. Pri obeh
smo najprej določili absolutno pozicijo elementa znotraj kontejner elementa9. To smo
9 Kontejner element je prvi starševski element, katerega pozicija ni statična. Če tak element ne
obstaja je kontejner blok <html>.
Animacija z uporabo jezika CSS 3
13
določili s pomočjo CSS vrednosti left, right, top in bottom, ki določajo pozicijo elementa
levo, desno, gor in dol od roba kontejner elementa. Pri prvem načinu je za vsako pozicijo
sledilo določanje absolutne pozicije. Programska koda 4.2 prikazuje pravilo glavne slike
za žogico pri žonglerju, medtem ko slika 4.2 prikazuje različne pozicije rumene žogice v
animaciji.
@keyframes zoga {
0% { top: 170px; left: 280px; }
8% { top: 135px; left: 215px; }
16% { top: 130px; left: 160px; }
24% { top: 150px; left: 100px; }
32% { top: 190px; left: 55px; }
40% { top: 140px; left: 60px; }
45% { top: 40px; left: 95px; }
55% { top: 5px; left: 180px; }
70% { top: 50px; left: 265px; }
85% { top: 120px; left: 280px; }
100% { top: 170px; left: 280px; }
}
Programska koda 4.2: Pravilo za gibanje oz. animacijo žogic pri žonglerju
Slika 4.2: Pozicija rumene žogice v animaciji
Pri drugem načinu se začetna pozicija določi enako. Zatem sledi določanje premika po
horizontali (transform: translateX(x)) ali vertikali (transform: translateY(y)), s pomočjo CSS
3 lastnosti transform in vrednosti translate. Dovoljena je tudi uporaba translate(x,y), ki
prestavi objekt za x slikovnih točk na levo in y slikovnih točk navzdol. Programska koda
Animacija z uporabo jezika CSS 3
14
4.3 je pravilo za animacijo nilskega konja, s katerim ga prestavimo za 20 slikovnih točk
navzdol.
@keyframes konj_na_zogi {
50% {
transform: translateY(+20px);
}
}
Programska koda 4.3: Pravilo za premik navzdol
4.2.4 Rotacija
Rotacijo elementov smo uporabili pri tjulnju (za premik glave), ki odbija žogo (vrtenje
žoge). Implementirali smo jo s CSS 3 lastnostjo transform in vrednostjo rotate()10.
Programska koda 4.4 prikazuje uporabo vrednosti rotate(), znotraj pravila glavne slike, za
premik tjulnjeve glave. Glava se zasuče iz začetnega položaja za 30 stopinj v smeri
urinega kazalca in nazaj, kot to prikazuje slika 4.3.
@keyframes tjulen_glava {
0% { transform: rotate(0deg); }
60% { transform: rotate(30deg); }
92% { transform: rotate(30deg); }
100% { transform: rotate(0deg); }
}
Programska koda 4.4: Pravilo z uporabo rotacije
10 Funkcija rotate() rotira element okoli točke (privzeto je center elementa) za specificirano vrednot.
Velikost kota je lahko podana v stopinjah ali radianih, grads ali obratih, ter je lahko pozitivna (zasuk v smeri urinega kazalca) ali negativna (zasuk v nasprotni smeri urinega kazalca).
Animacija z uporabo jezika CSS 3
15
Slika 4.3: Premik glave s pravilom za rotacijo
4.2.5 Približevanje in oddaljevanje
Učinek približevanja oziroma oddaljevanja elementa smo dosegli z povečevanjem oz.
pomanjšanjem želenega elementa. Ta efekt smo uporabili pri opici na trapezu, katere
pravilo za animacijo je programska koda 4.5. Pri približevanju in oddaljevanju uporabimo
CSS 3 lastnost transform in vrednost scale (vrednost), pri čemer uporaba vrednosti
scale(1) naj ne bi spremenila velikosti elementa, scale(2) naj bi podvojila njegovo velikost
in scale(0.5) naj bi zmanjšala velikost elementa na polovico (50 %). Pri opici na trapezu
smo uporabili vrednosti od 10 % velikosti na začetku, do osnovne velikosti na koncu.
Rezultat približevanja je prikazan na sliki 4.4.
Animacija z uporabo jezika CSS 3
16
@keyframes spust_opica {
0% {
top: -300px;
right: 0px;
transform: scale(0.1);
}
30% {
top: -150px;
right: 100px;
transform: scale(0.5);
}
35% {
top: -120px;
right: 70px;
transform: scale(0.6) rotate(-10deg);
}
60% {
top: -50px;
right: -280px;
transform: scale(1) rotate(-50deg);
}
100% {
top: -50px;
right: -280px;
transform: scale(1) rotate(-50deg);
}
}
Programska koda 4.5: Pravilo z uporabo lastnostjo transform za povečavo in rotacijo
Slika 4.4: Približevanje in rotacija opice
Animacija z uporabo jezika CSS 3
17
4.2.6 Razteg in skrčitev
Učinek za razteg in skrčitev smo v animaciji uporabili pri odbijajoči žogi, oz. pri
»skakajočem« nilskem konju na žogi. Ko se žoga odbije od tal, namreč pričakujemo, da
se upogne. To smo dosegli s pomočjo CSS 3 lastnosti transform in vrednostjo scale(x,y)
znotraj pravila glavne slike kot v programski kodi 4.6. Pravilo, ki ga vidimo na spodnji sliki,
raztegne žogo na 120 % originalne širine ter skrči na 80 % originalne višine. S tem
dosežemo učinek odboja, kot je prikazano na sliki 4.5.
@keyframes zogas {
50% {
transform: translateY(+10px) scale(1.2,0.8);
}
}
Programska koda 4.6: Pravilo za razteg/skrčitev žoge
Slika 4.5: Prikaz raztega in skrčitve žoge
4.2.7 Ponovitev animacije
Animacije določenih elementov se lahko ponovijo poljubno mnogokrat. Na primer spust
opice se zgodi samo enkrat, spust in dvig zaveze natančno dvakrat in žongliranje
mnogokrat. Za določanje števila ponovitev smo uporabili animation-iteration-count, kjer
smo enostavno vnesli število ponovitev ali pri neskončnem ponavljanju vrednost infinite.
Uporabili smo tudi dva različna načina ponavljanja, določena z lastnostjo animation-
direction. Prvi, in tudi privzeti način je normalen (vrednost normal), kjer se animacija
predvaja tako kot je specificirana. Drugi način je alternativni (vrednost alternate), kjer je
Animacija z uporabo jezika CSS 3
18
vsak drugi krog ponavljanja animacije predvajan v nasprotni smeri11. Programska koda
4.7 prikazuje del CSS pravila, ki določa animacijo žonglerjeve rumene žogice. Ta
animacija se ponavlja v neskončno v normalni smeri. Drugače je pri animaciji spusta
zavese, kjer se animacija ponovi dvakrat v alternativni smeri, kot prikazuje slika 4.6 in je
zapisano v programski kodi 4.8.
#zogaRumena {
background-color: #ffd530;
border: 2px solid #ecbf0e;
width: 35px;
height: 35px;
border-radius: 20px;
z-index: 4;
position: absolute;
top: 170px;
left: 280px;
animation-name: zoga;
animation-duration: 2.5s;
animation-timing-function: linear;
animation-direction: normal;
animation-iteration-count: infinite;
}
Programska koda 4.7: Pravilo glavne slike, kjer se animacija ponavlja v neskončnost
11 Uporabimo lahko tudi vrednosti reverse ali alternate-reverse.
Animacija z uporabo jezika CSS 3
19
#cirkus #zavesa1 {
height: 500px;
width: 800px;
position: absolute;
top: -500px;
background-image: url(slike/zavesa1.png);
background-position: center bottom;
background-repeat: no-repeat;
background-size: cover;
z-index: 6;
animation-name: zavesa;
animation-duration: 3s;
animation-timing-function: easy;
animation-iteration-count: 2;
animation-delay: 22s;
animation-direction: alternate;
}
@keyframes zavesa{
0% { top: -500px; }
100% { top: 0px; }
}
Programska koda 4.8: Pravilo, kjer se animacija ponovi dvakrat v alternativni smeri
Slika 4.6: Animacija zavese
Animacija z uporabo jezika CSS 3
20
4.2.8 Časovna funkcija in hitrost animacije
Hitrost animacije je ključnega pomena za doseganje učinka »resničnosti«. Za njeno
določanje smo uporabili lastnost animation-duration, s katero smo v sekundah ali
milisekundah določili trajanje animacije. Še večji nadzor nad hitrostjo je omogočila
časovna funkcija animation-timing-function. Pri uporabi te funkcije smo uporabili različne
vrednosti, ki so podprte v CSS 3. Privzeta vrednost je easy, kar v prevodu pomeni
lahkotno – počasni začetek, lahkotno pospeševanje in na koncu pojemanje. Če želimo
pospeševanje bolj izraziti, moramo uporabiti vrednost easy-in-out. To smo uporabili pri
padcu žoge (na zgornji točki počasi, temu sledi pospešek pri padanju in na koncu
upočasnitev, ko se žoga dotakne tjulnja). Njeni alternativi sta easy-in (počasen začetek)
ter easy-out (pojemanje na koncu). Easy-in smo uporabili pri balonih in klovnu z balonom
na začetku animacije, easy-out pa pri spustu klovna z baloni. Za animacije, kjer ne prihaja
do sprememb v hitrosti, kot je animacija žogice pri žonglerju, smo uporabili vrednost
linear.
4.2.9 Dodatne funkcionalnosti
Poleg opisanih lastnosti, ki jih omogoča CSS, predvsem različica CSS 3, obstaja še več
elementov, ki poskrbijo za privlačnejšo podobo animacije.
Napise v animaciji lahko na primer polepšamo z uporabo različnih pisav, tudi tistih, ki jih
brskalniki ne poznajo, z uporabo CSS 3 pravila @font-face, kot lahko vidimo v programski
kodi 4.9., rezultat le-tega pa na sliki 4.7.
#naslov .circus {
font-family: cirkusPisava;
margin-left: 40px;
display: block;
}
@font-face {
font-family: cirkusPisava;
src: url('fonts/MONBIJOUX.ttf')
}
Programska koda 4.9: Pravilo za uvoz in uporabo različnih pisav
Animacija z uporabo jezika CSS 3
21
Slika 4.7: Naslov z uporabo različnih pisav
Prav tako smo v naši animaciji s pomočjo CSS 3 lastnosti border-radius narisali tudi
žogice pri žonglerju (kot prikazuje slika 4.2) in s pomočjo lastnosti border-radius in
transform: scaleX() elipso pri naslovu, ki jo lahko vidimo na sliki 4.7.
Za glasbo v ozadju smo uporabili HTML5 značko <audio>, katere uporaba je prikazana v
programski kodi 4.10. Zaradi uporabe lastnosti autoplay se začne glasba samodejno
predvajati ob obisku strani. Lokacijo datoteke in tip smo določili z značko source. Uporabo
elementa audio sicer podpirajo vse trenutne verzije brskalnikov, ne podpirajo pa nujno
vseh formatov datotek. Trenutno so uradno podprti formati MP3, Wav in Ogg, zaradi težav
pri podpori brskalnikov pa smo pri naši animaciji uporabili dve datoteki, eno tipa MP3
(podpira Internet Explorer 9.0, Google Chrome in Apple Safari) in drugo Ogg (podpira
Firefox, Google Chrome in Opera). Pri uporabi elementov HTML5 moramo posebej paziti
na uporabo ustrezne deklaracije.
Animacija z uporabo jezika CSS 3
22
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS 3 cirkus</title>
<link href="cirkus.css" rel="stylesheet" type="text/css" />
<link href="zongler.css" rel="stylesheet" type="text/css" />
<link href="tjulen.css" rel="stylesheet" type="text/css" />
<link href="zivali.css" rel="stylesheet" type="text/css" />
<script src="prefixfree.min.js" type="text/javascript"></script>
</head>
<body>
<audio autoplay="autoplay">
<source src="Circus.mp3" type="audio/mpeg" />
<source src="Circus.ogg" type="audio/ogg" />
</audio>
<div id="cirkus">
Programska koda 4.10: Del kode za predvajanje glasbe
Animacija z uporabo jezika CSS 3
23
5 PRIPOMOČKI PRI IZDELAVI ANIMACIJE
Čeprav je izgradnja animacije z jezikom CSS 3 dokaj nova metoda, so se na tržišču že
pojavili različni pripomočki, tako plačljivi kot tudi brezplačni, za pomoč pri izdelavi
animacij. V nadaljevanju predstavljamo nekaj primerov.
5.1 Orodje -prefix-free
Orodje -prefix-free- je brezplačno dostopna koda, ki deluje tako, da CSS pravilom dodaja
ustrezne predpone, kot so -webkit-, -moz- in -o-, če so te zahtevane. Uporaba tega orodja
omogoča razvijalcu, da mu pri pisanju kode ni treba skrbeti za uporabo pravilnih predpon
in lahko piše brez njih.
Brskalniki, ki podpirajo -prefix-free- so namizni brskalniki IE9+, Opera 10+, Firefox 3.5+,
Safari 4+ in Chrome, ter mobilni brskalniki Safari, Android browser, Chrome in Opera
Mobile. Pri uporabi v starejših verzijah brskalnika, ki tega orodja ne podpirajo, se CSS ne
»pokvari«, le vrednosti ne dobijo predpone, kar pri animaciji ne predstavlja težav, saj te
starejše verzije brskalnikov modula CSS 3 Animations tako ne podpirajo.
Orodje uporabimo tako, da vključimo datoteko prefixfree.js, ki jo dobimo brezplačno na
spletu, kamorkoli znotraj spletne strani. Programska koda 5.1 prikazuje CSS pravilo, ki je
napisano brez uporabe ustreznih predpon. Ko potem odpremo spletno stran s spletnim
brskalnikom Firefox in jo pregledamo s Firebug-om, kot prikazuje programska koda 5.2,
vidimo, da je orodje dodalo ustrezno predpono pred vsa pravila za animacijo.
Animacija z uporabo jezika CSS 3
24
#zongler {
height: 400px;
width: 380px;
background-image: url(slike/zongler.png);
background-position: top left;
background-repeat: no-repeat;
position: absolute;
z-index: 2;
opacity: 0;
overflow: hidden;
float: left;
left: -15px;
bottom: 10px;
animation-name: prikaz_zongler;
animation-duration: 14s;
animation-timing-function: linear;
animation-delay: 25s;
}
Programska koda 5.1: CSS pravilo brez uporabe predpon
#zongler {
-moz-animation-delay: 25s;
-moz-animation-duration: 14s;
-moz-animation-name: prikaz_zongler;
-moz-animation-timing-function: linear;
background-image: url("file:///C:/Users/Tjasa/Desktop/ITK-UN
Tjasa%20Soster/cirkus/slike/zongler.png");
background-position: left top;
background-repeat: no-repeat;
bottom: 10px;
float: left;
height: 400px;
left: -15px;
opacity: 0;
overflow: hidden;
position: absolute;
width: 380px;
z-index: 2;
}
Programska koda 5.2: CSS pravilo ob pregledu strani v brskalniku Firefox z orodjem Firebug
Animacija z uporabo jezika CSS 3
25
Slabost uporabe tega orodja je, da deluje le s pomočjo JavaScripta, ki pa se ga pri
izdelavi animacij z jezikom CSS 3 poskušamo izogniti, saj ga lahko uporabnik onemogoči
znotraj brskalnika.
5.2 Orodja za animacijo
Čeprav je sama sintaksa za izgradnjo animacij dokaj preprosta, se na tržišču pojavlja vse
več programov, ki omogočajo izgradnjo CSS 3 animacije. Orodja, kot so Sencha
Animator, Adobe Edge in Tumult Hype, so v pomoč razvijalcem, ki nimajo dobrega
tehničnega znanja.
Testirali smo Sencha Animator, katerega poskusno verzijo je mogoče dobiti brezplačno na
uradni spletni strani podjetja Sencha. Orodje omogoča izdelavo CSS 3 animacij in je
namenjeno predvsem izdelavi reklamnih sporočil, enostavnih iger in drugih animacij za
mobilne naprave. Glavno okno programa, ki je prikazano na sliki 5.1, je sestavljeno iz
orodjarne (ang. Tools Panel), časovnega traka (ang. Object Tree/Timeline), projektnega
platna (ang. Project Canvas) in zavihka z lastnostmi (ang. Properties Panel) [13].
Slika 5.1: Glavno okno programa Sencha Animator [13]
Animacija z uporabo jezika CSS 3
26
V orodju smo zgradili enostavno animacijo in jo nato testirali v brskalnikih. Izgradnja
animacije se začne tako, da najprej na projektno platno dodamo želene elemente.
Elementi, ki jih lahko vstavimo so kvadrat, krog, besedilo, slika in video ter jih najdemo v
orodjarni. Pri izdelavi naše animacije smo uporabili tekst, krog in sliko balona. Sledilo je
spreminjanje videza elementov (barva ozadja, obroba, velikost pisave …) s
spreminjanjem vrednosti v zavihku za lastnosti.
Elemente smo nato animirali s pomočjo časovnega traka. Uporabili smo različne načine
animacije. Sliki balona smo dodali gibanje, kar smo storili enostavno z določanjem pozicije
v različnih časovnih točkah, kot prikazuje slika 5.2. Prva pozicija balona je pri 1 sekundi,
ko je balon v najnižji legi in zadnja pri 4,5 sekunde, ko je v najvišji poziciji. Prav tako lahko
v zavihku za lastnosti spreminjamo časovno funkcijo, kot smo jo mi pri balonu na vrednost
ease-out.
Slika 5.2: Različne pozicije balona
Pri animaciji kroga smo uporabili različne funkcije, ki jih omogoča modul Transform. Tako
smo krog najprej raztegnili po horizontalni osi na 150 % in po vertikalni osi skrčili na 60 %
ter takšen krog rotirali za 20°. Vse to smo dosegli s spreminjanjem vrednosti v zavihku za
lastnosti, kot prikazuje slika 5.3. Na koncu smo kroglo še povečali na 200 % njene
originalne velikosti z nastavitvijo lastnosti Scale na 200 %.
Animacija z uporabo jezika CSS 3
27
Slika 5.3: Lastnosti za skrčitev/razteg in rotacijo krogle
Za animacijo napisa – bledenje in pojavitev, smo uporabili lastnost Opacitiy, ki jo najdemo
znotraj zavihka Transform in za spreminjanje barve lastnost Fill color znotraj zavihka
Type.
Tako izdelano animacijo lahko nato izvozimo kot html dokument. Taka animacija deluje v
vseh webkit brskalnikih. Če želimo, da animacijo podpira tudi brskalnik Firefox, moramo
ob ustvarjanju novega projekta seveda to možnost tudi označiti. Edini brskalnik, ki tako
narejene animacije ne predvaja, je Opera, ki ne generira kode z ustrezno predpono.
Animacija z uporabo jezika CSS 3
28
6 SKLEP
Specifikacija za izdelavo animacij s CSS 3 modulom Animation je med nami že več let in
menimo, da lahko postane pomembno orodje oz. jezik na področju izdelave animacij za
spletnih strani.
Sama sintaksa animacije je relativno preprosta in temelji na pravilu glavne slike (ang.
keyframe rule). Za razliko od sintakse za izgradnjo JavaScript animacij je pravilo glavne
slike lažje razumljivo tistim oblikovalcem, ki nimajo znanja iz programiranja. Tistim
razvijalcem spletnih strani, ki so do zdaj uporabljali Flash tehnologijo, je pravilo glavne
slike že znano, kar pomeni lažji prehod na CSS 3 animacije. Obenem se znotraj pravil
uporabljajo tudi različna CSS pravila, ki so večini oblikovalcev spletnih strani že znana.
Vsi tisti, ki jim je bolj všeč vizualni pristop k izgradnji animacije (ne pisanje kode), lahko
uporabijo različna orodja za pomoč pri izgradnji animacij, kot je Sencha Animation.
Njihova prednost je, da omogočajo izgradnjo CSS 3 animacije tudi tistim, ki ne poznajo
sintakse CSS. Prav tako so programi razviti podobno kot program Adobe Flash.
Menimo, da je glavna prednost CSS 3 animacij v tem, da za svoje delovanje znotraj
brskalnika ne potrebujejo vtičnikov. Prav tako ne vsebuje skriptnih jezikov, katerih
izvajanje lahko uporabniki znotraj brskalnikov onemogočijo bodisi vede ali nevede.
Predvajanje animacije zgrajene z jezikom CSS 3 poteka enako tekoče, kot animacije
zgrajene s Flashom in JavaScriptom. Prav tako je čas nalaganja spletne strani primerljiv z
drugimi tehnologijami.
Med samo izgradnjo animacije smo ugotovili, da lahko z uporabo elementov iz modula za
animacijo dosežemo večino učinkov, ki jih ponuja tudi Flash in tako vnesemo več življenja
na našo spletno stran. Predvidevamo, da bo ob večji podpori brskalnikov CSS 3
animacijam, pri tem mislimo predvsem na podporo brskalnika Internet Explorer (s
prihodom različice 10), zaživelo več spletnih strani, ki bodo namesto tehnologije Flash
uporabljale jezik CSS 3.
Animacija z uporabo jezika CSS 3
29
7 VIRI
[1] D. S. McFarland, CSS : the missing manual, O'Reilly Media, 2009.
[2] "CSS Syntax," W3CSchools, [Online]. Dostopno na:
http://www.w3schools.com/css/css_syntax.asp, zadnji dostop 12. 8. 2012.
[3] T. A. Felke-Morris, Basics of web design : HTML5 & CSS3, Boston: Addison-Wesley,
2012.
[4] Z. M. Gillenwater, Stunning CSS3: A project-based guide to the latest in CSS,
Berkeley: New Riders, 2011.
[5] P. Gasston, Tho Book of CSS3, San Francisco: No Starch Press, 2011.
[6] "CSS3 Introduction," W3Schools, [Online]. Dostopno na: http://www.w3schools.com/
css3/css3_intro.asp, zadnji dostop 7. 9. 2012.
[7] "CSS Reference," W3Schools, [Online]. Dostopno na: http://www.w3schools.com/
cssref/default.asp, zadnji dostop 18. 8. 2012.
[8] "CSS3 Animations," W3Schools, [Online]. Dostopno na: http://www.w3schools.com/
css3/css3_animations.asp, zadnji dostop 6. 8. 2012.
[9] A. Rachel, The CSS3 Anthology: Take Your Sites to New Heights, Collingwood:
SitePoint, 2012.
[10] "Firefox Release Notes," Mozzila Firefox, [Online]. Dostopno na: https://www.mozilla.
org/en-US/firefox/5.0/releasenotes/, zadnji dostop 11. 8. 2012.
[11] C. Mills, "Making a move with CSS3 animations," DEV.OPERA, 25. 4. 2012. [Online].
Dostopno na: http://dev.opera.com/articles/view/css3-animations/, zadnji dostop 11.
8. 2012.
[12] "Internet Explorer 10 Guide for Developers : CSS : Animations," Windows Internet
Explorer, 6. 5. 2012. [Online]. Dostopno na: http://msdn.microsoft.com/en-
us/library/ie/hh673530%28v=vs.85%29.aspx, zadnji dostop 11. 5. 2012.
[13] "Sencha Animator Guided Tour," Sencha Docs, [Online]. Dostopno na:
http://docs.sencha.com/animator/1-1/#!/guide/tour, zadnji dostop 25. 8. 2012.
Animacija z uporabo jezika CSS 3
30
[14] D. Jackson, D. Hyatt, C. Marrin, S. Galineau and D. L. Baron, "W3C," 3. 4. 2012.
[Online]. Dostopno na: http://www.w3.org/TR/css3-animations/, zadnji dostop 18. 7.
2012.
[15] "HTML5 Audio," W3Schools, [Online]. Dostopno na: http://www.w3schools.com/
html5/html5_audio.asp., zadnji dostop 18. 7. 2012.
[16] T. Waterhouse, "The Guide To CSS Animation: Principles and Examples," Smashing
Magazine, 14. 9. 2011. [Online]. Dostopno na: http://coding.smashingmagazine.com/
2011/09/14/the-guide-to-css-animation-principles-and-examples/, zadnji dostop 18. 7.
2012.
[17] E. Weyl, "A masterclass in CSS animations," .net Magazine, 13. 9. 2011. [Online].
Dostopno na: http://www.netmagazine.com/tutorials/masterclass-css-animations,
zadnji dostop 18. 7. 2012.
[18] L. Lazaris, "An Introduction To CSS3 Keyframe Animations," Smashing Magazine,
17. 5. 2011. [Online]. Dostopno na: http://coding.smashingmagazine.com/2011/05/17/
an-introduction-to-css3-keyframe-animations/, zadnji dostop 18. 7. 2012.