Mozgást adhatunk az oldalunkhoz kód írása nélkül. Használhatunk gif képeket, de ebben a leckében CSS animációkat és SVG grafikát próbálunk ki. A CSS animációk a HTML elemek CSS tulajdonságait módosítják látható változásokat idézve elő. Az SVG grafikákat ki lehet egészíteni egy <animation> elemmel is. Ez a téma nagyon kiterjedt, egy leckéhez. Érdemes bővebben utánaolvasni később.

Új CSS szabály ebben a leckében:
@keyframes – Ezt a szabályt használjuk animáció meghatározására. Megadhatunk egy HTML elemhez vagy osztályhoz több állapotot, amelyet érintenie kell.

Új CSS tulajdonság ebben a leckében:
animation-name - ezzel a tulajdonsággal meghatározhatunk/kapcsolhatunk egy animációt egy HTML elemhez vagy CSS osztályhoz. A tulajdonság értékének egy létező animáció nevét kell adni.
animation-duration – ezzel a tulajdonsággal megadhatjuk az animáció időtartamát másodpercben vagy ezredmásodpercben.
animation-iteration-count – ezzel a tulajdonsággal megadhatjuk, hogy hányszor ismétlődjön az animáció. A lehetséges értékek számok, vagy végtelen (infinite), ha az animációt addig akarjuk ismételni, amíg az oldal nyitva van.
animation-direction – ez a tulajdonság irányát adja meg. Alapértelmezett értéke a normal, egyéb lehetséges értékek a reverse (fordított irányba való lejátszás), alternate (direkt majd fordított irányba való lejátszást, váltakozó irányt jelent) stb.

Új HTML címke:
<svg> </svg>- ezt a címkét arra használjuk, hogy közrefogjuk egy SVG (Scalable Vector Graphics) kép leírását.

Új SVG elemek:
<circle/> - egy kör leírását teszi lehetővé. A cx és cy tulajdonsággal megjelölhetjük a kör középpontját, az r nevű tulajdonsággal pedig megadhatjuk a kör sugarát. Ezeket a tulajdonságokat megadhatjuk a CSS fájlból is. Nincs lezáró része a címkének,
<line/> - egy vonalat ír le. A két végpont koordinátáit kell megadni az x1, x2, y1, y2 tulajdonságoknak. Az értékek itt is megadhatóak a címkén belül vagy CSS fájlból, nem kell lezáró rész.
<text> </text> - ezzel az elemmel szöveget adhatunk az ábrához. Az x és y tulajdonságokkal megadhatjuk a helyet, ahol a szöveg megjelenik.
<animate> - ezt a címkét használhatjuk, ha az SVG elemhez animációt szeretnénk adni. A címkéhez tartozó tulajdonságoknak kell értéket adni, ahhoz, hogy elérjük a változást, amit szeretnénk. Meg kell adni a tulajdonságot, amit változtatni szeretnénk (attributeName), az SVG elem azonosítóját (xlink: href). Szükséges meghatározni a kezdőértéket (from) és a végértéket (to) a megváltoztatott tulajdonsághoz, az időtartamot is megadhatjuk (dur). Tanulmányozd a példákat további információkért.

Új SVG tulajdonságok:
stroke – ezzel a tulajdonsággal adhatunk színt az SVG elemek körvonalainak.
stroke-width – ezzel a tulajdonsággal az SVG elemek körvonalainak vastagságát adhatjuk meg.
fill – ezzel a tulajdonsággal az SVG elemek kitöltési színét adhatjuk meg.

Kiegészítések:
Az SVG a Scalable Vector Graphics rövidítése, jelentése méretezhető vektorgrafikus ábrázolás, azaz könnyen újraméretezhető ábra.
Ha SVG rajzot használsz ellenőrizd, melyik böngésző tudja kezelni a kódodat.
CSS animációkat is használhatunk az SVG elemek animálására, de nem minden tulajdonságot tudunk így elérni.
Más SVG animáció típusok/címkék is vannak az <animate>-en kívül mint az <animateMotion> vagy az <animateTransform>.

Példa CSS animációra:

A fenti példában a mondat bekezdésként van megjelölve. A change nevű animációt alkalmazzuk a bekezdésre, 10 másodpercig tart.
Az animáció öt lépésben módosítja a szöveg színét a zöld különböző árnyalataira. A szöveg mérete is nő.

Példa SVG rajzra:


Ebben a példában két vonalat és egy kört rajzolunk egy 200x200 pixeles rajzfelületre. Az elemek pozícióit a HTML fájlban határozzuk meg, minden más beállítást a CSS fájlból állítunk. A HTML fájlból is beállíthatóak.

A rajzfelületnek háttere és kerete van, ugyanúgy adhatjuk meg, ahogy minden más HTML elemnek az eddigi leckékben.
A vonalak pirosra vannak színezve és 2 pixel szélesek. A körnek nincs kitöltése, csak körvonala. Ezeket a tulajdonságokat csak SVG elemekre alkalmazhatjuk.
A lila számok a rajzfelület négy sarok koordinátáit jelentik és segítenek az elemek koordinátáinak meghatározásában.

Példa az SVG animációra:

A fenti példában a körhöz azonosítót adtunk, hogy hivatkozhassunk rá az animációból.
Az első animáció a kör sugarára hivatkozik, az r tulajdonságra: 50-ről emeljük az értékét 90 pixelre 5 másodperc alatt. Az animáció után a sugár visszaesik 50 pixelre, ha nem rendeljük a freeze értéket a fill tulajdonsághoz.
A második animáció egy vonal vastagságára vonatkozik. A helyes hivatkozás érdekében az egyik vonalnak azonosítót adunk. A vastagság 1-től 10 pixelig változik. Van egy plusz tulajdonság ebben az animációban: a begin tulajdonsággal értük el, hogy a második animáció az első befejezése után folytassa.