{"id":502,"date":"2020-03-11T17:39:34","date_gmt":"2020-03-11T17:39:34","guid":{"rendered":"https:\/\/ramk.ee\/opikud\/veebidisain\/?post_type=chapter&#038;p=502"},"modified":"2020-03-11T21:18:25","modified_gmt":"2020-03-11T21:18:25","slug":"animeerimine","status":"publish","type":"chapter","link":"https:\/\/ramk.ee\/opikud\/veebidisain\/chapter\/animeerimine\/","title":{"rendered":"Animeerimine"},"content":{"raw":"CSS3 v\u00f5imaldab ka animeerimist. See t\u00e4hendab, et mingite veebilehe elementide omadusi saab mingite kindlate reeglite j\u00e4rgi teatud ajavahemiku jooksul muuta. Nii saab luua n\u00e4iteks lihtsamaid b\u00e4nnereid.\r\n\r\nAnimatsioone v\u00f5ib CSS abil luua kaht moodi:\r\n<ul>\r\n \t<li>lastes mingite omaduste v\u00e4\u00e4rtuseid muutuda mingi aja jooksul \u2013 siirded (<em>transition<\/em>), mis on sobilik l\u00fchikeste animatsioonide, n\u00e4iteks kasutajaliidese efektide loomiseks;<\/li>\r\n \t<li>kasutades v\u00f5tmekaadreid, pikemate ja\/v\u00f5i ts\u00fckliliselt korduvate animatsioonide loomiseks.<\/li>\r\n<\/ul>\r\n<h1>Siire (transition)<\/h1>\r\n\u00dche v\u00f5imalusena saab luua sujuvaid \u00fcleminekuid muudetavate omaduste erinevate v\u00e4\u00e4rtuste vahel. Nii saab luua lausa animatsioone.\r\n\r\n\u00dclemineku (<em>transition<\/em>) jaoks m\u00e4\u00e4ratakse kasutatav aeg ja kiirendusfunktsioon (<em>ease<\/em>).\r\n<h2>Omadus, mille siire m\u00e4\u00e4ratakse<\/h2>\r\nM\u00e4\u00e4ramaks omadust, mille \u00fclemineku muutumist m\u00f5jutatakse, on omadus <em>transition-property<\/em>.\r\n\r\nSeda omadust saab kasutada v\u00e4ga paljude omaduste puhul alates taustav\u00e4rvist l\u00f5petades m\u00f5\u00f5tmete, transformatsioonide jms.\r\n\r\nKui soovitakse \u00fclemineku kiirust m\u00e4\u00e4rata k\u00f5igile v\u00f5imalikele omadustele, siis kasutatakse omadusele viitamiseks s\u00f5na <em>all<\/em> (k\u00f5ik).\r\n\r\nKorraga v\u00f5ib m\u00e4\u00e4rata ka mitu omadust, siis tuleb need lihtsalt komadega eraldada.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transition-property: width, background-color;\r\n}<\/pre>\r\n<span class=\"nb\">Omadused, mida saab transition omadusega kasutada kasutada ehk animeerida on loetletud aadressil: <a href=\"http:\/\/www.w3schools.com\/cssref\/css_animatable.asp\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.w3schools.com\/cssref\/css_animatable.asp<\/a><\/span>\r\n<h2>Siirde kestus ja viivitus<\/h2>\r\nM\u00e4\u00e4ramaks, kui kaua v\u00f5tab m\u00e4\u00e4ratud omaduse muutumine aega, kasutatakse omadust <em>transition-duration<\/em>, mille v\u00e4\u00e4rtuseks on aeg sekundites (m\u00f5\u00f5t\u00fchikuna lisatakse s).\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transition-duration: 3s;\r\n}<\/pre>\r\n\u00dcleminek ei pea toimuma kohe, v\u00f5ib m\u00e4\u00e4rata ka viivituse enne alustamist, selleks on omadus <em>transition-delay<\/em>, mille v\u00e4\u00e4rtuseks on aeg sekundites (m\u00f5\u00f5t\u00fchikuna lisatakse s).\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transition-delay: 3s;\r\n}<\/pre>\r\n<h2>Siirde kiirendusfunktsioon<\/h2>\r\n\u00dcleminek ei pea toimuma \u00fchtlase kiirusega, saab kasutada omadust <em>transition-timing-function<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>ease<\/em> \u2013 (vaikev\u00e4\u00e4rtus) \u00fcleminek algab aeglaselt, seej\u00e4rel kiireneb ja l\u00f5ppeb taas aeglaselt (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0.25,0.1,0.25,1)<\/em>);<\/li>\r\n \t<li><em>linear<\/em> \u2013 \u00fchtlane kiirus (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0,0,1,1)<\/em>);<\/li>\r\n \t<li><em>ease-in<\/em> \u2013 aeglane algus, kiirenev (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0.42,0,1,1)<\/em>);<\/li>\r\n \t<li><em>ease-out<\/em> \u2013 aeglustuv (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0,0,0.58,1)<\/em>);<\/li>\r\n \t<li><em>ease-in-out<\/em> \u2013 alguses kiirenev, l\u00f5pus aeglustuv (<em>vastab v\u00e4\u00e4rtusele cubicbezier(0.42,0,0.58,1)<\/em>);<\/li>\r\n \t<li><em>cubic-bezier(n,n,n,n)<\/em> \u2013 kohandatud kiirusega, v\u00f5imalikud v\u00e4\u00e4rtused vahemikus 0 \u2026 1.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transition-timing-function: ease-in-out;\r\n}<\/pre>\r\n<h2>Siirde m\u00e4\u00e4ramine l\u00fchendatult, kasutamine<\/h2>\r\nNeid nelja omadust v\u00f5ib kompaktselt koos kasutada, selleks on omadus transition, mille v\u00e4\u00e4rtuseks kirjutatakse t\u00fchikutega eraldatuna eelnevalt kirjeldatud omaduste v\u00e4\u00e4rtused j\u00e4rgmises j\u00e4rjekorras:\r\n<p style=\"padding-left: 40px;\"><em>transition: m\u00f5jutatav_omadus aeg kiirendus viivitus_enne_muudatust<\/em><\/p>\r\nKorraga saab m\u00e4\u00e4rata mitut \u00fcleminekut, selleks tuleb need komadega eraldatult kirja panna.\r\n\r\nN\u00e4iteks:\r\n<p style=\"padding-left: 40px;\"><em>transition: background-color 4s ease-in-out 0s, width 2s linear 1s;<\/em><\/p>\r\n<span class=\"nb\">NB! Kuna tegemist on \u00fcleminekuga kahe v\u00e4\u00e4rtuse vahel, siis on vaja mingisugust k\u00e4ivitumist, n\u00e4iteks <em>:focus<\/em> v\u00f5i <em>:hover<\/em> s\u00fcndmus (pseudoklass).<\/span>\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">#moonduvpilt:hover {\r\n  transform-origin: 50% 50%;\r\n  transfom: scale(.5) rotate(45deg) skew(30deg 0deg);\r\n}<\/pre>\r\n<h1>V\u00f5tmekaadrid<\/h1>\r\nAnimatsiooni loomiseks tuleb k\u00f5igepealt luua v\u00f5tmekaadrid, mis m\u00e4\u00e4ravad muutuvad omadused ja muutuste suurused ning seej\u00e4rel seotakse need v\u00f5tmekaadrid mingi veebilehe elemendiga.\r\n\r\n<span class=\"nb\">Omadused, mida saab v\u00f5tmekaadrites kasutada ehk animeerida on loetletud aadressil:\r\n<a href=\"http:\/\/www.w3schools.com\/cssref\/css_animatable.asp\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.w3schools.com\/cssref\/css_animatable.asp<\/a><\/span>\r\n\r\n<span class=\"nb\">NB! Kuna k\u00f5ik veebilehitsejad veel t\u00e4ielikult ei toeta animatsiooni, siis tuleb kasutada ka eesliiteid (n\u00e4iteks Mozilla Firefox jaoks \u2013moz-) ja seda nii v\u00f5tmekaadrite defineerimiseks kui ka animatsiooni rakendamiseks!<\/span>\r\n\r\n<span style=\"text-align: initial; font-size: 1em;\">V\u00f5tmekaadrid (<em>keyframes<\/em>) on animatsiooni t\u00f6\u00f6vahendid, millede abil fikseeritakse <\/span>muudetavad omadused ja muutuste suurus erinevatel ajahetkedel.\r\n\r\nV\u00f5tmekaadrite m\u00e4\u00e4ramiseks kasutatakse <em>@keyframes<\/em> reeglit kujul:\r\n<p style=\"padding-left: 40px;\"><em>@keyframes animatsiooni_nimi {<\/em>\r\n<em>v\u00f5tmekaadrid<\/em>\r\n<em>}<\/em><\/p>\r\nV\u00f5tmekaadrid seejuures on omaette CSS stiilid, kus selektoriks on v\u00f5tmekaader (animatsiooni positsioon) ning sellele j\u00e4rgnevad muudetavad omadused ja nende v\u00e4\u00e4rtused antud hetkel. V\u00f5tmekaadri selektoriteks v\u00f5ivad olla v\u00e4\u00e4rtused 0% kuni 100% v\u00f5i siis <em>from<\/em> (sama mis 0%) ja <em>to<\/em> (sama mis 100%).\r\n\r\n<span class=\"nb\">NB! V\u00f5tmekaadrite m\u00e4\u00e4ramisel v\u00f5ib kasutada protsentuaalseid v\u00e4\u00e4rtuseid sajandiku t\u00e4psusega (kaks kohta p\u00e4rast koma).<\/span>\r\n\r\nN\u00e4iteks loome v\u00f5tmekaadrid, mis muudavad elemendi taustav\u00e4rvi alustades punasest, minnes \u00fcle roheliseks ja l\u00f5petades sinisega:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@keyframes taustaRGB {\r\n  0% {background-color: red;}\r\n  50% {background-color: green;}\r\n  100% {background-color: blue;}\r\n}<\/pre>\r\nKorraga v\u00f5ib muutuda mitu erinevat omadust, need tuleb v\u00f5tmekaadrites CSS-ile tavap\u00e4rasel moel semikoolonitega eraldatult kirja panna.\r\n\r\nN\u00e4iteks loome v\u00f5tmekaadrid, mis lisaks taustav\u00e4rvile liigutavad elementi tema esialgsest asukohast alguses 200 pikslit paremale, siis 200 pikslit alla, siis 200 pikslit vasakule ja l\u00f5puks esialgsele kohale tagasi:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@keyframes taustaRGB_liigu_ruudul {\r\n  0% {background-color: red; transform: translate(0px,0px);}\r\n  25% {background-color: yellow; transform: translate(200px,0px);}\r\n  50% {background-color: green; transform: translate(200px,200px);}\r\n  75% {background-color: cyan; transform: translate(0px,200px);}\r\n  100% {background-color: blue; transform: translate(0px,0px);}\r\n}<\/pre>\r\n<h1>Animatsioon<\/h1>\r\nM\u00e4\u00e4ratud v\u00f5tmekaadrid seotakse veebilehe elemendiga kasutades j\u00e4rgnevalt kirjeldatavaid omadusi.\r\n\r\n<span class=\"nb\">NB! Selline l\u00e4henemine v\u00f5imaldab \u00fchte ja sama komplekti v\u00f5tmekaadreid kasutada erinevatel veebilehe elementidel (ka erinevate seadetega).<\/span>\r\n<h2>V\u00f5tmekaadrite sidumine elemendiga ja animatsiooni kestus<\/h2>\r\nKasutatavad v\u00f5tmekaadrid ehk v\u00f5tmekaadritel m\u00e4\u00e4ratud animatsiooni nimi m\u00e4\u00e4ratakse omadusega animation-name. Selle v\u00e4\u00e4rtuseks on soovitud v\u00f5tmekaadrite juures m\u00e4\u00e4ratud nimetus.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-name: panoraami;\r\n}<\/pre>\r\nAnimatsiooni kestuse m\u00e4\u00e4rab omadus animation-duration. Selle omaduse v\u00e4\u00e4rtuseks on arv sekundites (m\u00f5\u00f5t\u00fchikuna lisatakse s), vaikimisi on v\u00e4\u00e4rtuseks 0s.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-duration: 4s;\r\n}<\/pre>\r\n<h2>Animatsiooni kiirendusfunktsioon<\/h2>\r\nSarnaselt transformatsioonidele, saab m\u00e4\u00e4rata, kas on tegemist \u00fchtlase kiirusega toimiva animatsiooniga v\u00f5i toimub ka kiirenemine, aeglustumine. Selleks on omadus <em>animation-timing-function<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>ease<\/em> \u2013 (vaikev\u00e4\u00e4rtus) \u00fcleminek algab aeglaselt, seej\u00e4rel kiireneb ja l\u00f5ppeb taas aeglaselt (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0.25,0.1,0.25,1)<\/em>);<\/li>\r\n \t<li><em>linear<\/em> \u2013 \u00fchtlane kiirus (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0,0,1,1)<\/em>);<\/li>\r\n \t<li>ease-in \u2013 aeglane algus, kiirenev (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0.42,0,1,1)<\/em>);<\/li>\r\n \t<li><em>ease-out<\/em> \u2013 aeglustuv (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0,0,0.58,1)<\/em>);<\/li>\r\n \t<li><em>ease-in-out<\/em> \u2013 alguses kiirenev, l\u00f5pus aeglustuv ((vastab v\u00e4\u00e4rtusele <em>cubicbezier(0.42,0,0.58,1)<\/em>);<\/li>\r\n \t<li><em>cubic-bezier(n,n,n,n)<\/em> \u2013 kohandatud kiirusega, v\u00f5imalikud v\u00e4\u00e4rtused vahemikus 0 \u2026 1.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-timing-function: ease-in-out;\r\n}<\/pre>\r\n<h2>Viivitus enne animatsiooni algust<\/h2>\r\nM\u00e4\u00e4ramaks viivitust enne animatsiooni k\u00e4ivitumist (muidu k\u00e4ivitub kohe veebilehe laadimise j\u00e4rel), kasutatakse omadust <span style=\"text-decoration: underline;\">animation-delay<\/span>, mille v\u00e4\u00e4rtuseks on arv sekundites (m\u00f5\u00f5t\u00fchikuna lisatakse s), vaikimisi on v\u00e4\u00e4rtuseks 0s.\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-delay: 5s;\r\n}<\/pre>\r\nViivitust saab kasutada n\u00e4iteks mitmele elemendile identse animatsiooni rakendamisel, kui tahetakse, et elementide animatsioonid kulgeksid \u00fcksteise suhtes v\u00e4ikeses ajalises nihkes.\r\n<h2>Animatsiooni kordamine<\/h2>\r\nAnimatsiooni v\u00f5ib panna korduma, selleks on omadus <em>animation-iteration-count<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li>t\u00e4isarv \u2013 m\u00e4\u00e4ra, mitu korda animatsiooni esitatakse, vaikev\u00e4\u00e4rtuseks 1;<\/li>\r\n \t<li><em>infinite<\/em> \u2013 animatsiooni korratakse l\u00f5pmatult.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-iteration-count: 6;\r\n}<\/pre>\r\n<h2>Animatsiooni kulgemise suund<\/h2>\r\nAnimatsiooni v\u00f5ib esitada otsast l\u00f5puni, edasi tagasi v\u00f5i n\u00e4iteks tagurpidi. Suuna m\u00e4\u00e4ramiseks kasutatakse omadust <em>animation-direction<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>normal<\/em> \u2013 animatsioon esitatakse tavap\u00e4raselt algusest l\u00f5puni (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t<li><em>reverse<\/em> \u2013 animatsioon esitatakse tagurpidi l\u00f5pust alguseni;<\/li>\r\n \t<li><em>alternate<\/em> \u2013 animatsiooni esitatakse vaheldumisi \u00f5igetpidi ja tagurpidi ehk paaritutel kordadel \u00f5igetpidi;<\/li>\r\n \t<li><em>alternate-reverse<\/em> \u2013 animatsiooni esitatakse vaheldumisi kuid alustatakse tagurpidi esitamisest ehk paariarvulistel kordadel \u00f5igetpidi.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-direction: alternate;\r\n}<\/pre>\r\n<h2>Elemendi omadused enne ja p\u00e4rast animatsiooni<\/h2>\r\nKui animatsioon l\u00f5ppeb, siis vaikimisi taastub animatsiooni eelne olukord ehk k\u00f5ik elemendid liiguvad tagasi algsetele kohtadele, taastuvad esialgsed v\u00e4rvid jne. M\u00e4\u00e4ramaks, mis toimub enne animatsiooni k\u00e4ivitumist v\u00f5i p\u00e4rast selle l\u00f5ppu, on omadus <em>animation-fill-mode<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:\r\n<ul>\r\n \t<li><em>none<\/em> \u2013 animatsioon ei m\u00e4\u00e4ra veebilehe elemendile mingeid omadusi enne ega p\u00e4rast esitust (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t<li><em>forwards<\/em> \u2013 p\u00e4rast animatsiooni l\u00f5ppemist rakendatakse veebilehe elemendile need omadused, millega animatsioon l\u00f5ppes (viimase v\u00f5tmekaadri seaded);<\/li>\r\n \t<li><em>backwards<\/em> \u2013 veebilehe elemendile rakendatakse juba enne animatsiooni algust (viivituse (<em>delay<\/em>) ajal) need omadused, millega algab esimene animatsiooni kordus;<\/li>\r\n \t<li><em>both<\/em> \u2013 veebilehe elemendile rakendatakse enne ja p\u00e4rast animatsiooni omadused, mis m\u00e4\u00e4ratakse animatsiooni poolt vastavalt alustades ja l\u00f5petades.<\/li>\r\n<\/ul>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-fill-mode: both;\r\n}<\/pre>\r\n<h2>Animatsiooni olek<\/h2>\r\nAnimatsiooni saab m\u00e4ngimise ajal ka peatada (paus), selleks kasutatakse omadust <em>animation-play-state<\/em>, mille v\u00e4\u00e4rtusteks on:\r\n<ul>\r\n \t<li><em>running<\/em> \u2013 animatsiooni esitatakse (vaikev\u00e4\u00e4rtus);<\/li>\r\n \t<li><em>paused<\/em> \u2013 animatsiooni esitus on peatatud.<\/li>\r\n<\/ul>\r\nNB! Omaduse <em>animation-play-state<\/em> v\u00e4\u00e4rtuse muutmiseks on vaja mingit s\u00fcndmust (n\u00e4iteks <em>:hover<\/em> pseudoklass) ning sellele reageerimist (n\u00e4iteks JavaScript\u2019i abil).\r\n\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">img:hover {\r\n  animation-play-state: paused;\r\n}<\/pre>\r\n<h2>Animatsiooni m\u00e4\u00e4ramine \u00fche omadusena<\/h2>\r\nAnimatsiooni v\u00f5ib kirja panna ka l\u00fchidalt, \u00fche omadusega animation, mille v\u00e4\u00e4rtuseks tuleb t\u00fchikutega eraldatult loetleda eelnevalt kirjeldatud omaduste v\u00e4\u00e4rtused:\r\n<p style=\"padding-left: 40px;\"><em>animation: name duration timing-function delay iteration-count direction fill-mode play-state;<\/em><\/p>\r\nN\u00e4iteks:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation: edasi 3s ease-in-out 2s 4 alternate;\r\n}<\/pre>\r\n<span class=\"nb\">NB! Kui m\u00f5ne omaduse v\u00e4\u00e4rtust kirja ei panda, siis kasutatakse selle vaikev\u00e4\u00e4rtust (eelmisel n\u00e4itel <em>fill-mode<\/em> ja <em>play-state<\/em>).<\/span>\r\n<h2>Animatsiooni n\u00e4ide<\/h2>\r\nN\u00e4iteks paigutame veebilehele pildi k\u00f5rgusega 200 pikslit ja laiusega 1200 pikslit, paigutame selle \u00fche elemendi <code>&lt;div&gt;<\/code> sisse, mille laiuseks m\u00e4\u00e4rame 600 pikslit (pool pildi laiust) ning peidame \u00fcle serva ulatuva sisu (et pildist vaid pool paistaks). Paneme pildi edasi tagasi liikuma (600 pikslit vasakule), et k\u00f5ike n\u00e4ha, l\u00f5petame 5 korra j\u00e4rel (pildist j\u00e4\u00e4b naha pool, mis algselt oli varjatud). Kui hiirega pildile liikuda (<em>:hover<\/em>) animatsioon peatub.\r\n\r\nKood:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\" dir=\"ltr\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\"&gt;\r\n  &lt;title&gt;&lt;\/title&gt;\r\n  &lt;style&gt;\r\n  \/*div jaoks*\/\r\n  .ekraan {\r\n    width: 600px;\r\n    height:200px;\r\n    overflow:hidden;\r\n  }\r\n  \/*pildi jaoks*\/\r\n  .panoraam {\r\n    animation: edasi 5s ease-in-out 2s 5 alternate forwards running;\r\n  }\r\n  .panoraam:hover {\r\n    animation-play-state: paused;\r\n  }\r\n  \/*animatsiooni v\u00f5tmekaadrid*\/\r\n  @keyframes edasi {\r\n    0% {transform: translate(0px,0px);}\r\n    100% {transform: translate(-600px,0px);}\r\n  }\r\n  \r\n  \r\n  &lt;\/style&gt;\r\n  \r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div class=\"ekraan\"&gt;\r\n    &lt;img src=\"panoraampilt.jpg\" alt=\"panoraam\" class=\"panoraam\"&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>","rendered":"<p>CSS3 v\u00f5imaldab ka animeerimist. See t\u00e4hendab, et mingite veebilehe elementide omadusi saab mingite kindlate reeglite j\u00e4rgi teatud ajavahemiku jooksul muuta. Nii saab luua n\u00e4iteks lihtsamaid b\u00e4nnereid.<\/p>\n<p>Animatsioone v\u00f5ib CSS abil luua kaht moodi:<\/p>\n<ul>\n<li>lastes mingite omaduste v\u00e4\u00e4rtuseid muutuda mingi aja jooksul \u2013 siirded (<em>transition<\/em>), mis on sobilik l\u00fchikeste animatsioonide, n\u00e4iteks kasutajaliidese efektide loomiseks;<\/li>\n<li>kasutades v\u00f5tmekaadreid, pikemate ja\/v\u00f5i ts\u00fckliliselt korduvate animatsioonide loomiseks.<\/li>\n<\/ul>\n<h1>Siire (transition)<\/h1>\n<p>\u00dche v\u00f5imalusena saab luua sujuvaid \u00fcleminekuid muudetavate omaduste erinevate v\u00e4\u00e4rtuste vahel. Nii saab luua lausa animatsioone.<\/p>\n<p>\u00dclemineku (<em>transition<\/em>) jaoks m\u00e4\u00e4ratakse kasutatav aeg ja kiirendusfunktsioon (<em>ease<\/em>).<\/p>\n<h2>Omadus, mille siire m\u00e4\u00e4ratakse<\/h2>\n<p>M\u00e4\u00e4ramaks omadust, mille \u00fclemineku muutumist m\u00f5jutatakse, on omadus <em>transition-property<\/em>.<\/p>\n<p>Seda omadust saab kasutada v\u00e4ga paljude omaduste puhul alates taustav\u00e4rvist l\u00f5petades m\u00f5\u00f5tmete, transformatsioonide jms.<\/p>\n<p>Kui soovitakse \u00fclemineku kiirust m\u00e4\u00e4rata k\u00f5igile v\u00f5imalikele omadustele, siis kasutatakse omadusele viitamiseks s\u00f5na <em>all<\/em> (k\u00f5ik).<\/p>\n<p>Korraga v\u00f5ib m\u00e4\u00e4rata ka mitu omadust, siis tuleb need lihtsalt komadega eraldada.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transition-property: width, background-color;\r\n}<\/pre>\n<p><span class=\"nb\">Omadused, mida saab transition omadusega kasutada kasutada ehk animeerida on loetletud aadressil: <a href=\"http:\/\/www.w3schools.com\/cssref\/css_animatable.asp\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.w3schools.com\/cssref\/css_animatable.asp<\/a><\/span><\/p>\n<h2>Siirde kestus ja viivitus<\/h2>\n<p>M\u00e4\u00e4ramaks, kui kaua v\u00f5tab m\u00e4\u00e4ratud omaduse muutumine aega, kasutatakse omadust <em>transition-duration<\/em>, mille v\u00e4\u00e4rtuseks on aeg sekundites (m\u00f5\u00f5t\u00fchikuna lisatakse s).<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transition-duration: 3s;\r\n}<\/pre>\n<p>\u00dcleminek ei pea toimuma kohe, v\u00f5ib m\u00e4\u00e4rata ka viivituse enne alustamist, selleks on omadus <em>transition-delay<\/em>, mille v\u00e4\u00e4rtuseks on aeg sekundites (m\u00f5\u00f5t\u00fchikuna lisatakse s).<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transition-delay: 3s;\r\n}<\/pre>\n<h2>Siirde kiirendusfunktsioon<\/h2>\n<p>\u00dcleminek ei pea toimuma \u00fchtlase kiirusega, saab kasutada omadust <em>transition-timing-function<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>ease<\/em> \u2013 (vaikev\u00e4\u00e4rtus) \u00fcleminek algab aeglaselt, seej\u00e4rel kiireneb ja l\u00f5ppeb taas aeglaselt (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0.25,0.1,0.25,1)<\/em>);<\/li>\n<li><em>linear<\/em> \u2013 \u00fchtlane kiirus (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0,0,1,1)<\/em>);<\/li>\n<li><em>ease-in<\/em> \u2013 aeglane algus, kiirenev (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0.42,0,1,1)<\/em>);<\/li>\n<li><em>ease-out<\/em> \u2013 aeglustuv (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0,0,0.58,1)<\/em>);<\/li>\n<li><em>ease-in-out<\/em> \u2013 alguses kiirenev, l\u00f5pus aeglustuv (<em>vastab v\u00e4\u00e4rtusele cubicbezier(0.42,0,0.58,1)<\/em>);<\/li>\n<li><em>cubic-bezier(n,n,n,n)<\/em> \u2013 kohandatud kiirusega, v\u00f5imalikud v\u00e4\u00e4rtused vahemikus 0 \u2026 1.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  transition-timing-function: ease-in-out;\r\n}<\/pre>\n<h2>Siirde m\u00e4\u00e4ramine l\u00fchendatult, kasutamine<\/h2>\n<p>Neid nelja omadust v\u00f5ib kompaktselt koos kasutada, selleks on omadus transition, mille v\u00e4\u00e4rtuseks kirjutatakse t\u00fchikutega eraldatuna eelnevalt kirjeldatud omaduste v\u00e4\u00e4rtused j\u00e4rgmises j\u00e4rjekorras:<\/p>\n<p style=\"padding-left: 40px;\"><em>transition: m\u00f5jutatav_omadus aeg kiirendus viivitus_enne_muudatust<\/em><\/p>\n<p>Korraga saab m\u00e4\u00e4rata mitut \u00fcleminekut, selleks tuleb need komadega eraldatult kirja panna.<\/p>\n<p>N\u00e4iteks:<\/p>\n<p style=\"padding-left: 40px;\"><em>transition: background-color 4s ease-in-out 0s, width 2s linear 1s;<\/em><\/p>\n<p><span class=\"nb\">NB! Kuna tegemist on \u00fcleminekuga kahe v\u00e4\u00e4rtuse vahel, siis on vaja mingisugust k\u00e4ivitumist, n\u00e4iteks <em>:focus<\/em> v\u00f5i <em>:hover<\/em> s\u00fcndmus (pseudoklass).<\/span><\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">#moonduvpilt:hover {\r\n  transform-origin: 50% 50%;\r\n  transfom: scale(.5) rotate(45deg) skew(30deg 0deg);\r\n}<\/pre>\n<h1>V\u00f5tmekaadrid<\/h1>\n<p>Animatsiooni loomiseks tuleb k\u00f5igepealt luua v\u00f5tmekaadrid, mis m\u00e4\u00e4ravad muutuvad omadused ja muutuste suurused ning seej\u00e4rel seotakse need v\u00f5tmekaadrid mingi veebilehe elemendiga.<\/p>\n<p><span class=\"nb\">Omadused, mida saab v\u00f5tmekaadrites kasutada ehk animeerida on loetletud aadressil:<br \/>\n<a href=\"http:\/\/www.w3schools.com\/cssref\/css_animatable.asp\" target=\"_blank\" rel=\"noopener noreferrer\">http:\/\/www.w3schools.com\/cssref\/css_animatable.asp<\/a><\/span><\/p>\n<p><span class=\"nb\">NB! Kuna k\u00f5ik veebilehitsejad veel t\u00e4ielikult ei toeta animatsiooni, siis tuleb kasutada ka eesliiteid (n\u00e4iteks Mozilla Firefox jaoks \u2013moz-) ja seda nii v\u00f5tmekaadrite defineerimiseks kui ka animatsiooni rakendamiseks!<\/span><\/p>\n<p><span style=\"text-align: initial; font-size: 1em;\">V\u00f5tmekaadrid (<em>keyframes<\/em>) on animatsiooni t\u00f6\u00f6vahendid, millede abil fikseeritakse <\/span>muudetavad omadused ja muutuste suurus erinevatel ajahetkedel.<\/p>\n<p>V\u00f5tmekaadrite m\u00e4\u00e4ramiseks kasutatakse <em>@keyframes<\/em> reeglit kujul:<\/p>\n<p style=\"padding-left: 40px;\"><em>@keyframes animatsiooni_nimi {<\/em><br \/>\n<em>v\u00f5tmekaadrid<\/em><br \/>\n<em>}<\/em><\/p>\n<p>V\u00f5tmekaadrid seejuures on omaette CSS stiilid, kus selektoriks on v\u00f5tmekaader (animatsiooni positsioon) ning sellele j\u00e4rgnevad muudetavad omadused ja nende v\u00e4\u00e4rtused antud hetkel. V\u00f5tmekaadri selektoriteks v\u00f5ivad olla v\u00e4\u00e4rtused 0% kuni 100% v\u00f5i siis <em>from<\/em> (sama mis 0%) ja <em>to<\/em> (sama mis 100%).<\/p>\n<p><span class=\"nb\">NB! V\u00f5tmekaadrite m\u00e4\u00e4ramisel v\u00f5ib kasutada protsentuaalseid v\u00e4\u00e4rtuseid sajandiku t\u00e4psusega (kaks kohta p\u00e4rast koma).<\/span><\/p>\n<p>N\u00e4iteks loome v\u00f5tmekaadrid, mis muudavad elemendi taustav\u00e4rvi alustades punasest, minnes \u00fcle roheliseks ja l\u00f5petades sinisega:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@keyframes taustaRGB {\r\n  0% {background-color: red;}\r\n  50% {background-color: green;}\r\n  100% {background-color: blue;}\r\n}<\/pre>\n<p>Korraga v\u00f5ib muutuda mitu erinevat omadust, need tuleb v\u00f5tmekaadrites CSS-ile tavap\u00e4rasel moel semikoolonitega eraldatult kirja panna.<\/p>\n<p>N\u00e4iteks loome v\u00f5tmekaadrid, mis lisaks taustav\u00e4rvile liigutavad elementi tema esialgsest asukohast alguses 200 pikslit paremale, siis 200 pikslit alla, siis 200 pikslit vasakule ja l\u00f5puks esialgsele kohale tagasi:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">@keyframes taustaRGB_liigu_ruudul {\r\n  0% {background-color: red; transform: translate(0px,0px);}\r\n  25% {background-color: yellow; transform: translate(200px,0px);}\r\n  50% {background-color: green; transform: translate(200px,200px);}\r\n  75% {background-color: cyan; transform: translate(0px,200px);}\r\n  100% {background-color: blue; transform: translate(0px,0px);}\r\n}<\/pre>\n<h1>Animatsioon<\/h1>\n<p>M\u00e4\u00e4ratud v\u00f5tmekaadrid seotakse veebilehe elemendiga kasutades j\u00e4rgnevalt kirjeldatavaid omadusi.<\/p>\n<p><span class=\"nb\">NB! Selline l\u00e4henemine v\u00f5imaldab \u00fchte ja sama komplekti v\u00f5tmekaadreid kasutada erinevatel veebilehe elementidel (ka erinevate seadetega).<\/span><\/p>\n<h2>V\u00f5tmekaadrite sidumine elemendiga ja animatsiooni kestus<\/h2>\n<p>Kasutatavad v\u00f5tmekaadrid ehk v\u00f5tmekaadritel m\u00e4\u00e4ratud animatsiooni nimi m\u00e4\u00e4ratakse omadusega animation-name. Selle v\u00e4\u00e4rtuseks on soovitud v\u00f5tmekaadrite juures m\u00e4\u00e4ratud nimetus.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-name: panoraami;\r\n}<\/pre>\n<p>Animatsiooni kestuse m\u00e4\u00e4rab omadus animation-duration. Selle omaduse v\u00e4\u00e4rtuseks on arv sekundites (m\u00f5\u00f5t\u00fchikuna lisatakse s), vaikimisi on v\u00e4\u00e4rtuseks 0s.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-duration: 4s;\r\n}<\/pre>\n<h2>Animatsiooni kiirendusfunktsioon<\/h2>\n<p>Sarnaselt transformatsioonidele, saab m\u00e4\u00e4rata, kas on tegemist \u00fchtlase kiirusega toimiva animatsiooniga v\u00f5i toimub ka kiirenemine, aeglustumine. Selleks on omadus <em>animation-timing-function<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>ease<\/em> \u2013 (vaikev\u00e4\u00e4rtus) \u00fcleminek algab aeglaselt, seej\u00e4rel kiireneb ja l\u00f5ppeb taas aeglaselt (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0.25,0.1,0.25,1)<\/em>);<\/li>\n<li><em>linear<\/em> \u2013 \u00fchtlane kiirus (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0,0,1,1)<\/em>);<\/li>\n<li>ease-in \u2013 aeglane algus, kiirenev (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0.42,0,1,1)<\/em>);<\/li>\n<li><em>ease-out<\/em> \u2013 aeglustuv (vastab v\u00e4\u00e4rtusele <em>cubic-bezier(0,0,0.58,1)<\/em>);<\/li>\n<li><em>ease-in-out<\/em> \u2013 alguses kiirenev, l\u00f5pus aeglustuv ((vastab v\u00e4\u00e4rtusele <em>cubicbezier(0.42,0,0.58,1)<\/em>);<\/li>\n<li><em>cubic-bezier(n,n,n,n)<\/em> \u2013 kohandatud kiirusega, v\u00f5imalikud v\u00e4\u00e4rtused vahemikus 0 \u2026 1.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-timing-function: ease-in-out;\r\n}<\/pre>\n<h2>Viivitus enne animatsiooni algust<\/h2>\n<p>M\u00e4\u00e4ramaks viivitust enne animatsiooni k\u00e4ivitumist (muidu k\u00e4ivitub kohe veebilehe laadimise j\u00e4rel), kasutatakse omadust <span style=\"text-decoration: underline;\">animation-delay<\/span>, mille v\u00e4\u00e4rtuseks on arv sekundites (m\u00f5\u00f5t\u00fchikuna lisatakse s), vaikimisi on v\u00e4\u00e4rtuseks 0s.<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-delay: 5s;\r\n}<\/pre>\n<p>Viivitust saab kasutada n\u00e4iteks mitmele elemendile identse animatsiooni rakendamisel, kui tahetakse, et elementide animatsioonid kulgeksid \u00fcksteise suhtes v\u00e4ikeses ajalises nihkes.<\/p>\n<h2>Animatsiooni kordamine<\/h2>\n<p>Animatsiooni v\u00f5ib panna korduma, selleks on omadus <em>animation-iteration-count<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li>t\u00e4isarv \u2013 m\u00e4\u00e4ra, mitu korda animatsiooni esitatakse, vaikev\u00e4\u00e4rtuseks 1;<\/li>\n<li><em>infinite<\/em> \u2013 animatsiooni korratakse l\u00f5pmatult.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-iteration-count: 6;\r\n}<\/pre>\n<h2>Animatsiooni kulgemise suund<\/h2>\n<p>Animatsiooni v\u00f5ib esitada otsast l\u00f5puni, edasi tagasi v\u00f5i n\u00e4iteks tagurpidi. Suuna m\u00e4\u00e4ramiseks kasutatakse omadust <em>animation-direction<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>normal<\/em> \u2013 animatsioon esitatakse tavap\u00e4raselt algusest l\u00f5puni (vaikev\u00e4\u00e4rtus);<\/li>\n<li><em>reverse<\/em> \u2013 animatsioon esitatakse tagurpidi l\u00f5pust alguseni;<\/li>\n<li><em>alternate<\/em> \u2013 animatsiooni esitatakse vaheldumisi \u00f5igetpidi ja tagurpidi ehk paaritutel kordadel \u00f5igetpidi;<\/li>\n<li><em>alternate-reverse<\/em> \u2013 animatsiooni esitatakse vaheldumisi kuid alustatakse tagurpidi esitamisest ehk paariarvulistel kordadel \u00f5igetpidi.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-direction: alternate;\r\n}<\/pre>\n<h2>Elemendi omadused enne ja p\u00e4rast animatsiooni<\/h2>\n<p>Kui animatsioon l\u00f5ppeb, siis vaikimisi taastub animatsiooni eelne olukord ehk k\u00f5ik elemendid liiguvad tagasi algsetele kohtadele, taastuvad esialgsed v\u00e4rvid jne. M\u00e4\u00e4ramaks, mis toimub enne animatsiooni k\u00e4ivitumist v\u00f5i p\u00e4rast selle l\u00f5ppu, on omadus <em>animation-fill-mode<\/em>, millel on j\u00e4rgmised v\u00f5imalikud v\u00e4\u00e4rtused:<\/p>\n<ul>\n<li><em>none<\/em> \u2013 animatsioon ei m\u00e4\u00e4ra veebilehe elemendile mingeid omadusi enne ega p\u00e4rast esitust (vaikev\u00e4\u00e4rtus);<\/li>\n<li><em>forwards<\/em> \u2013 p\u00e4rast animatsiooni l\u00f5ppemist rakendatakse veebilehe elemendile need omadused, millega animatsioon l\u00f5ppes (viimase v\u00f5tmekaadri seaded);<\/li>\n<li><em>backwards<\/em> \u2013 veebilehe elemendile rakendatakse juba enne animatsiooni algust (viivituse (<em>delay<\/em>) ajal) need omadused, millega algab esimene animatsiooni kordus;<\/li>\n<li><em>both<\/em> \u2013 veebilehe elemendile rakendatakse enne ja p\u00e4rast animatsiooni omadused, mis m\u00e4\u00e4ratakse animatsiooni poolt vastavalt alustades ja l\u00f5petades.<\/li>\n<\/ul>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation-fill-mode: both;\r\n}<\/pre>\n<h2>Animatsiooni olek<\/h2>\n<p>Animatsiooni saab m\u00e4ngimise ajal ka peatada (paus), selleks kasutatakse omadust <em>animation-play-state<\/em>, mille v\u00e4\u00e4rtusteks on:<\/p>\n<ul>\n<li><em>running<\/em> \u2013 animatsiooni esitatakse (vaikev\u00e4\u00e4rtus);<\/li>\n<li><em>paused<\/em> \u2013 animatsiooni esitus on peatatud.<\/li>\n<\/ul>\n<p>NB! Omaduse <em>animation-play-state<\/em> v\u00e4\u00e4rtuse muutmiseks on vaja mingit s\u00fcndmust (n\u00e4iteks <em>:hover<\/em> pseudoklass) ning sellele reageerimist (n\u00e4iteks JavaScript\u2019i abil).<\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">img:hover {\r\n  animation-play-state: paused;\r\n}<\/pre>\n<h2>Animatsiooni m\u00e4\u00e4ramine \u00fche omadusena<\/h2>\n<p>Animatsiooni v\u00f5ib kirja panna ka l\u00fchidalt, \u00fche omadusega animation, mille v\u00e4\u00e4rtuseks tuleb t\u00fchikutega eraldatult loetleda eelnevalt kirjeldatud omaduste v\u00e4\u00e4rtused:<\/p>\n<p style=\"padding-left: 40px;\"><em>animation: name duration timing-function delay iteration-count direction fill-mode play-state;<\/em><\/p>\n<p>N\u00e4iteks:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\">div {\r\n  animation: edasi 3s ease-in-out 2s 4 alternate;\r\n}<\/pre>\n<p><span class=\"nb\">NB! Kui m\u00f5ne omaduse v\u00e4\u00e4rtust kirja ei panda, siis kasutatakse selle vaikev\u00e4\u00e4rtust (eelmisel n\u00e4itel <em>fill-mode<\/em> ja <em>play-state<\/em>).<\/span><\/p>\n<h2>Animatsiooni n\u00e4ide<\/h2>\n<p>N\u00e4iteks paigutame veebilehele pildi k\u00f5rgusega 200 pikslit ja laiusega 1200 pikslit, paigutame selle \u00fche elemendi <code>&lt;div&gt;<\/code> sisse, mille laiuseks m\u00e4\u00e4rame 600 pikslit (pool pildi laiust) ning peidame \u00fcle serva ulatuva sisu (et pildist vaid pool paistaks). Paneme pildi edasi tagasi liikuma (600 pikslit vasakule), et k\u00f5ike n\u00e4ha, l\u00f5petame 5 korra j\u00e4rel (pildist j\u00e4\u00e4b naha pool, mis algselt oli varjatud). Kui hiirega pildile liikuda (<em>:hover<\/em>) animatsioon peatub.<\/p>\n<p>Kood:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"en\" dir=\"ltr\"&gt;\r\n&lt;head&gt;\r\n  &lt;meta charset=\"utf-8\"&gt;\r\n  &lt;title&gt;&lt;\/title&gt;\r\n  &lt;style&gt;\r\n  \/*div jaoks*\/\r\n  .ekraan {\r\n    width: 600px;\r\n    height:200px;\r\n    overflow:hidden;\r\n  }\r\n  \/*pildi jaoks*\/\r\n  .panoraam {\r\n    animation: edasi 5s ease-in-out 2s 5 alternate forwards running;\r\n  }\r\n  .panoraam:hover {\r\n    animation-play-state: paused;\r\n  }\r\n  \/*animatsiooni v\u00f5tmekaadrid*\/\r\n  @keyframes edasi {\r\n    0% {transform: translate(0px,0px);}\r\n    100% {transform: translate(-600px,0px);}\r\n  }\r\n  \r\n  \r\n  &lt;\/style&gt;\r\n  \r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n  &lt;div class=\"ekraan\"&gt;\r\n    &lt;img src=\"panoraampilt.jpg\" alt=\"panoraam\" class=\"panoraam\"&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;\r\n<\/pre>\n","protected":false},"author":1,"menu_order":11,"template":"","meta":{"_mi_skip_tracking":false,"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"part":310,"_links":{"self":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/502"}],"collection":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":3,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/502\/revisions"}],"predecessor-version":[{"id":505,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/502\/revisions\/505"}],"part":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/parts\/310"}],"metadata":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapters\/502\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/media?parent=502"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/pressbooks\/v2\/chapter-type?post=502"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/contributor?post=502"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/ramk.ee\/opikud\/veebidisain\/wp-json\/wp\/v2\/license?post=502"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}