{"id":249742,"date":"2023-08-13T09:06:00","date_gmt":"2023-08-13T06:06:00","guid":{"rendered":"https:\/\/inform.click\/herata-verkkosivusi-henkiin-css-animaatioilla-ja-siirtymilla\/"},"modified":"2023-08-13T09:28:00","modified_gmt":"2023-08-13T06:28:00","slug":"herata-verkkosivusi-henkiin-css-animaatioilla-ja-siirtymilla","status":"publish","type":"post","link":"https:\/\/inform.click\/fi\/herata-verkkosivusi-henkiin-css-animaatioilla-ja-siirtymilla\/","title":{"rendered":"Her\u00e4t\u00e4 verkkosivusi henkiin CSS-animaatioilla ja -siirtymill\u00e4"},"content":{"rendered":"<p>\n  Verkkosivujen suunnittelu kehittyy jatkuvasti. Responsiivisesta suunnittelusta, kauniista typografiasta, t\u00e4ydellisist\u00e4 v\u00e4rikoodauksista, kuvituksista, sivuston luojat keksiv\u00e4t uusia ideoita ja malleja joka p\u00e4iv\u00e4.\n<\/p>\n<p>\n  K\u00e4ytt\u00e4jill\u00e4 on nyky\u00e4\u00e4n korkeat odotukset k\u00e4ytt\u00f6liittymi\u00e4 kohtaan Internetin kautta saatavilla olevan korkealaatuisen sis\u00e4ll\u00f6n vuoksi. Verkkosivustojen k\u00e4ytt\u00f6liittymien kehittyess\u00e4 kehittyy my\u00f6s niiden takana oleva tekniikka. Yksi t\u00e4rke\u00e4 komponentti, joka vastaa verkkosivuston k\u00e4ytt\u00f6liittym\u00e4n parantamisesta, on <strong>CSS<\/strong>.\n<\/p>\n<p>\n  CSS tai Cascading Style Sheets tekev\u00e4t sivustoista paljon interaktiivisia m\u00e4\u00e4ritt\u00e4m\u00e4ll\u00e4 niiden tyylin, asettelun ja mallit. Uusin CSS-standardi eli CSS3 on ottanut k\u00e4ytt\u00f6\u00f6n <strong>animaatioiden<\/strong> ja <strong>muunnosten<\/strong> konseptin, jotka parantavat k\u00e4ytt\u00f6kokemusta lis\u00e4\u00e4m\u00e4ll\u00e4 k\u00e4ytt\u00f6liittym\u00e4\u00e4n syvyytt\u00e4. CSS-animaatioiden ja siirtymien avulla voit kertoa tarinoita, luoda ylellisi\u00e4 tehosteita ja tehd\u00e4 k\u00e4ytt\u00e4jien vuorovaikutuksesta verkkosivustosi kanssa paljon tehokkaampaa ja merkityksellist\u00e4.\n<\/p>\n<p>\n  Animaatio on vain liikkeen simulaatio, joka luodaan n\u00e4ytt\u00e4m\u00e4ll\u00e4 sarjaa esineit\u00e4, kuten kuvia per\u00e4kk\u00e4in. Siirtyminen puolestaan \u200b\u200bon pohjimmiltaan prosessi, jossa objekti muuttuu tilasta toiseen. Mutta kun puhumme verkkoanimaatioista, niit\u00e4 on periaatteessa kolmea tyyppi\u00e4 \u2013 <strong>CSS-animaatioita<\/strong> tai avainkehysanimaatioita, <strong>CSS-siirtymi\u00e4<\/strong> ja <strong>JavaScript-animaatioita<\/strong>.\n<\/p>\n<p>\n  CSS-animaatioita\n<\/p>\n<p>\n  Animaatioiden luomiseksi CSS:ss\u00e4 meid\u00e4n on muutettava elementin, kuten kuvan tai tekstin, CSS-ominaisuuksia tietyksi ajaksi. Voimme muuttaa elementtien ominaisuuksia niin monta kertaa kuin haluamme ja voimme my\u00f6s asettaa animaation keston.\n<\/p>\n<h5>\n  M\u00e4\u00e4ritet\u00e4\u00e4n @keyframes<br \/>\n<\/h5>\n<p>\n  CSS-animaatiot m\u00e4\u00e4ritell\u00e4\u00e4n bittin\u00e4 avainkehyksill\u00e4. N\u00e4m\u00e4 avainkehykset ovat animaation v\u00e4lipisteit\u00e4. Kaikki CSS-animaatiot m\u00e4\u00e4ritell\u00e4\u00e4n @keyframes-s\u00e4\u00e4nn\u00f6ss\u00e4. N\u00e4m\u00e4 avainkehykset m\u00e4\u00e4ritt\u00e4v\u00e4t, mit\u00e4 elementille tapahtuu tietyll\u00e4 hetkell\u00e4, eli\n<\/p>\n<ul>\n<li>mitk\u00e4 ominaisuudet muuttuvat\n  <\/li>\n<li>kun elementti animoituu\n  <\/li>\n<li>kuinka elementti animoituu\n  <\/li>\n<\/ul>\n<p>\n  Voit m\u00e4\u00e4ritt\u00e4\u00e4 oman avainkehyksesi seuraavasti:\n<\/p>\n<pre><code>@keyframes animation_name\n{\nfrom{ property: value; }\nto{ property: value; }\n}<\/code><\/pre>\n<p>\n  T\u00e4ss\u00e4 &#8221;to&#8221; ja &#8221;alkaen&#8221; m\u00e4\u00e4ritt\u00e4v\u00e4t animaation alun ja lopun. Voimme my\u00f6s m\u00e4\u00e4ritt\u00e4\u00e4 animaatioita alun ja lopun v\u00e4lisille hetkille seuraavasti:\n<\/p>\n<pre><code>@keyframes name\n{\n0%{ property: value; }\n50%{ property: value; }\n100%{ property: value; }\n}<\/code><\/pre>\n<p>\n  T\u00e4ss\u00e4 0 % tarkoittaa animaation alkua, 100 % animaation loppua ja 50 % tarkoittaa muutosta alun ja lopun v\u00e4lill\u00e4. Mutta kuinka kerromme selaimelle, kuinka kauan animaation tulisi kest\u00e4\u00e4? Teemme t\u00e4m\u00e4n tiettyjen <strong>animaatioominaisuuksien<\/strong> avulla. N\u00e4m\u00e4 animaatioominaisuudet liittyv\u00e4t animoitavaan elementtiin. Esimerkiksi:\n<\/p>\n<pre><code>element_name\n{\nanimation_property: value;\nstyle_property: value;\n}<\/code><\/pre>\n<p>\n  T\u00e4ss\u00e4 elementti voi olla mik\u00e4 tahansa HTML-tunniste, kuten div, span, img, p jne. ja <code>style_property<\/code>se on mik\u00e4 tahansa CSS-tyyliominaisuus, kuten background_color, width, height jne. Tarkastellaan nyt joitain animaatioominaisuuksia yksityiskohtaisesti.\n<\/p>\n<ol>\n<li>\n    <strong>@keyframes<\/strong>: Avainkehyksi\u00e4 k\u00e4ytet\u00e4\u00e4n animaatiokoodin m\u00e4\u00e4ritt\u00e4miseen edell\u00e4 kuvatulla tavalla.\n  <\/li>\n<li>\n    <strong>animation-name<\/strong>: @keyframes-kent\u00e4ll\u00e4 m\u00e4\u00e4ritetty nimi on animaation nimi. T\u00e4t\u00e4 nime\u00e4 k\u00e4ytet\u00e4\u00e4n viittaamaan avainkehyksiin animoitavan elementin kanssa.\n  <\/li>\n<li>\n    <strong>animation-duration<\/strong>: Sit\u00e4 k\u00e4ytet\u00e4\u00e4n m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4n animaation kesto sekunteina tai millisekunteina. Jos esimerkiksi asetamme sen arvoksi 5 sekuntia, animaatio kest\u00e4\u00e4 vain 5 sekuntia. Jos emme aseta t\u00e4t\u00e4 ominaisuutta, animaatio ei toimi ollenkaan, koska sen oletusarvo on 0.\n  <\/li>\n<li>\n    <strong>animation-delay<\/strong>: Voimme viivytt\u00e4\u00e4 animaation alkamista m\u00e4\u00e4ritt\u00e4m\u00e4ll\u00e4 animaation viiveajan. Jos esimerkiksi haluat aloittaa animaation 5 sekuntia sivun latautumisen j\u00e4lkeen, aseta animaation viive arvoon 5 sekuntia.\n  <\/li>\n<li>\n    <strong>animation-direction<\/strong>: Voimme kertoa selaimelle, liikkuuko animaatio p\u00e4invastaiseen suuntaan vai vuorotteleeko t\u00e4m\u00e4n ominaisuuden kanssa. Jos esimerkiksi haluat animaation jatkuvan alusta loppuun, aseta animaation keston arvoksi &#8221;normaali&#8221;. Jos haluat sen jatkuvan alusta alkuun, aseta vain arvoksi &#8221;k\u00e4\u00e4nteinen&#8221;.\n  <\/li>\n<li>\n    <strong>animation-fill-mode<\/strong>: Voimme m\u00e4\u00e4ritt\u00e4\u00e4 elementin tyylin, kun animaatiota ei toisteta t\u00e4ss\u00e4 tilassa eli kun animaatio viiv\u00e4styy tai p\u00e4\u00e4ttyy, mik\u00e4 elementin tyylin tulisi olla.\n  <\/li>\n<li>\n    <strong>animation-itration-count<\/strong>: T\u00e4m\u00e4 ominaisuus esitt\u00e4\u00e4 kuinka monta kertaa animaatio voidaan toistaa. Jos esimerkiksi haluat toistaa animaation kerran, aseta sen arvoksi 1 tai jos haluat animaation jatkuvan ikuisesti, aseta se '\u00e4\u00e4ret\u00f6n'.\n  <\/li>\n<li>\n    <strong>animation-timing-function<\/strong>: T\u00e4t\u00e4 ominaisuutta k\u00e4ytet\u00e4\u00e4n m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4n animaation nopeusk\u00e4yr\u00e4, kuten lineaarinen, kiihtyvyys tai kiihtyvyyden v\u00e4hent\u00e4minen.\n  <\/li>\n<li>\n    <strong>Animaatio<\/strong>: Se on lyhenne ominaisuus kaikkien animaation ominaisuuksien asettamiseen.\n  <\/li>\n<\/ol>\n<p>\n  Voit esimerkiksi animoida pomppivan objektin seuraavalla koodinp\u00e4tk\u00e4ll\u00e4. Huomaa, kuinka t\u00e4ss\u00e4 on k\u00e4ytetty animaatioiden lyhennett\u00e4.\n<\/p>\n<pre><code>@keyframes slide {\n 0% {\n  left: 0;\n  top: 0;\n }\n 50% {\n  left: 244px;\n  top: 100px;\n }\n 100% {\n  left: 488px;\n  top: 0;\n }\n}\n \n.stage:hover .object {\n animation: slide 2s linear;    \/*shorthand animation property*\/\n}\n \n.object {\n background: #2db34a;\n border-radius: 50%;\n height: 50px;\n position: absolute;\n width: 50px;\n}<\/code><\/pre>\n<h3>\n  Siirtym\u00e4t<br \/>\n<\/h3>\n<p>\n  CSS-siirtymi\u00e4 sovelletaan elementtien ominaisuuksiin tietyn ajan ajan perustuen tiettyihin <strong>ajoitustoimintoihin<\/strong> eli helpotustoimintoihin. Ajoitusfunktiolla tarkoitamme funktiota, joka muuttaa elementtien ominaisuuksia tilasta toiseen, kuten lineaarista etenemist\u00e4, kiihtyvyytt\u00e4 tai hidastamista. Olet ehk\u00e4 huomannut, ett\u00e4 kuva liukuu tai muuttuu toiseksi kuvaksi hiiren osoituksesta tai \u00e4\u00e4ni kuuluu hiiren napsautuksella. N\u00e4m\u00e4 ovat kaikki siirtym\u00e4tehosteita, jotka voivat tehd\u00e4 verkkosivustosta interaktiivisen.\n<\/p>\n<p>\n  <strong>Helpotustoiminnot<\/strong> ovat t\u00e4rkeit\u00e4 siirtymien luomisessa. Ne m\u00e4\u00e4rittelev\u00e4t, kuinka ominaisuudet muuttuvat. Ne voivat my\u00f6s muuttaa nopeutta, jolla ominaisuuksien arvo muuttuu siirtym\u00e4n aloituspisteest\u00e4 loppupisteeseen. Voit k\u00e4ytt\u00e4\u00e4 siirtymi\u00e4 seuraavalla tavalla:\n<\/p>\n<pre><code>element\n{\nstyle_property: value;\ntransition_property: value;\n}<\/code><\/pre>\n<p>\n  T\u00e4ss\u00e4 elementti m\u00e4\u00e4ritt\u00e4\u00e4 HTML-elementin, jonka haluat muuntaa, kuten div, H1, img jne. style_property on kyseisess\u00e4 elementiss\u00e4 k\u00e4ytetty CSS-tyyli. Katsotaanpa nyt joitain <strong>siirtym\u00e4ominaisuuksia<\/strong> :\n<\/p>\n<ul>\n<li>\n    <strong>Transitio-ominaisuus<\/strong>: Siirtym\u00e4tehostetta k\u00e4ytet\u00e4\u00e4n aina elementin CSS-ominaisuuteen, kuten sen leveyteen, korkeuteen, v\u00e4riin tai muotoon. T\u00e4m\u00e4n attribuutin arvo m\u00e4\u00e4ritt\u00e4\u00e4 elementin CSS-ominaisuuden. Siirtym\u00e4tehoste alkaa aina, kun t\u00e4m\u00e4 ominaisuus muuttuu, esimerkiksi hiiren osoitin tai napsautus.\n  <\/li>\n<li>\n    <strong>Transit-timing-function<\/strong>: T\u00e4m\u00e4 on elementtiin sovellettava helppoustoiminto. T\u00e4t\u00e4 ominaisuutta k\u00e4ytet\u00e4\u00e4n m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4n siirtym\u00e4n nopeusk\u00e4yr\u00e4, kuten ease-in, ease-out, lineaarinen jne.\n  <\/li>\n<li>\n    <strong>Transitio-duration<\/strong>: Se on aivan kuin animaatio-kestoominaisuus. Sit\u00e4 k\u00e4ytet\u00e4\u00e4n m\u00e4\u00e4ritt\u00e4m\u00e4\u00e4n siirtym\u00e4tehosteen kesto sekunteina tai millisekunteina. Jos esimerkiksi asetamme sen arvoksi 5 sekuntia, siirtym\u00e4 vaikuttaa 5 sekuntiin. Jos emme aseta t\u00e4t\u00e4 ominaisuutta, siirtym\u00e4\u00e4 ei tapahdu ollenkaan, koska sen oletusarvo on 0.\n  <\/li>\n<li>\n    <strong>Transitio-delay<\/strong>: T\u00e4ll\u00e4 ominaisuudella voimme m\u00e4\u00e4ritt\u00e4\u00e4 keston siirtym\u00e4vaikutuksen viivytt\u00e4miseen. Jos esimerkiksi haluat k\u00e4ynnist\u00e4\u00e4 tehosteen 5 sekuntia hiiren osoittamisen j\u00e4lkeen, aseta siirtym\u00e4viive 5 sekuntiin.\n  <\/li>\n<li>\n    <strong>siirtyminen<\/strong>: Se on lyhenne ominaisuus, jolla kaikki yll\u00e4 olevat siirtym\u00e4ominaisuudet asetetaan yhteen.\n  <\/li>\n<\/ul>\n<p>\n  Esimerkiksi seuraava koodi muuttaa div-elementin leveytt\u00e4 hiiren osoitin. Katso t\u00e4ss\u00e4 k\u00e4ytetty siirtym\u00e4n pikakirjoitusominaisuus.\n<\/p>\n<pre><code>div {\n  width: 50px;\n  height: 50px;\n  background: blue;\n  transition: height 4s;     \/*transition shorthand on height for 4 seconds*\/\n}\ndiv:hover {\n  height: 200px;      \/* increase height on mouse hover *\/\n}<\/code><\/pre>\n<h3>\n  Animaatiot vs. siirtym\u00e4t<br \/>\n<\/h3>\n<h5>\n  Animaatioiden ja siirtymien yht\u00e4l\u00e4isyydet<br \/>\n<\/h5>\n<ul>\n<li>Sek\u00e4 siirtym\u00e4\u00e4 ett\u00e4 animaatiota k\u00e4ytet\u00e4\u00e4n elementin ominaisuuksien muutosten visualisointiin.\n  <\/li>\n<li>Voimme m\u00e4\u00e4ritt\u00e4\u00e4 keston, kuinka kauan siirtym\u00e4n ja animaation tulisi tapahtua.\n  <\/li>\n<li>Meill\u00e4 on tiettyj\u00e4 ajoitustoimintoja, joilla voidaan muuttaa arvosta toiseen siirtymisen nopeutta sek\u00e4 siirtymiss\u00e4 ett\u00e4 animaatioissa.\n  <\/li>\n<\/ul>\n<h5>\n  Erot animaatioiden ja siirtymien v\u00e4lill\u00e4<br \/>\n<\/h5>\n<ul>\n<li>CSS-siirtym\u00e4t ovat <strong>reaktiivisia<\/strong>. Ne on k\u00e4ynnistett\u00e4v\u00e4 k\u00e4ytt\u00e4jien toimesta. Toisaalta animaatiot toimivat aina, kun sivu latautuu selaimeen. Niit\u00e4 ei tarvitse laukaista.\n  <\/li>\n<li>Siirtym\u00e4t suoritetaan kerran ja pys\u00e4htyv\u00e4t sitten. Sitten meid\u00e4n on k\u00e4ynnistett\u00e4v\u00e4 ne uudestaan \u200b\u200b\u200b\u200bja uudestaan, kun animaatiot voivat <strong>kiert\u00e4\u00e4<\/strong>. He voivat aloittaa omalta pys\u00e4kilt\u00e4 ja sitten aloittaa uudelleen.\n  <\/li>\n<li>Selain hoitaa siirtym\u00e4t itse. Meid\u00e4n on vain m\u00e4\u00e4ritett\u00e4v\u00e4 siirtym\u00e4n alku ja loppu. Voimme asettaa siirtym\u00e4vaikutuksen, mutta emme voi muuttaa v\u00e4lisen siirtym\u00e4n muutosnopeutta. Jos esimerkiksi kuva liukuu hiiren p\u00e4\u00e4ll\u00e4, n\u00e4emme sen vain h\u00e4ivytt\u00e4v\u00e4n sis\u00e4\u00e4n tai poistuvan, kun viemme hiiren sen p\u00e4\u00e4ll\u00e4.\n  <\/li>\n<li>Animaatiot puolestaan \u200b\u200btarjoavat joustavuutta muuttaa ominaisuuksia alun ja lopun v\u00e4lill\u00e4. T\u00e4m\u00e4 tapahtuu avainkehysten avulla. Voimme esimerkiksi asettaa kuvan v\u00e4rin punaiseksi ensimm\u00e4iset 5 sekuntia, sitten siniseksi seuraavat 5 sekuntia, sitten vihre\u00e4ksi seuraavat 5 sekuntia ja keltaiseksi viimeiset 5 sekuntia. N\u00e4in ollen voimme hallita animaatioita.\n  <\/li>\n<\/ul>\n<h5>\n  Myyj\u00e4n etuliitteet<br \/>\n<\/h5>\n<p>\n  Kaikki selaimet eiv\u00e4t tue kaikkia CSS3-ominaisuuksia. T\u00e4st\u00e4 syyst\u00e4 k\u00e4yt\u00e4mme etuliitteit\u00e4 n\u00e4iden CSS-ominaisuuksien yhteydess\u00e4 tietyille selaimille, kuten -webkit- (Safari), -moz- (Firefox) tai -o- (Opera). N\u00e4in selaimen merkit voivat lis\u00e4t\u00e4 tuen t\u00e4lle CSS3-ominaisuudesta. N\u00e4it\u00e4 etuliitteit\u00e4 kutsutaan <strong>toimittajan etuliitteiksi<\/strong> tai <strong>CSS-selaimen etuliitteiksi<\/strong>. Siksi meid\u00e4n on lis\u00e4tt\u00e4v\u00e4 my\u00f6s toimittajan etuliitteet sek\u00e4 animaatio- ja siirtym\u00e4ominaisuudet. Harkitse esimerkiksi alla olevaa koodia ja katso, kuinka Safarin toimittajan etuliitteit\u00e4 on k\u00e4ytetty:\n<\/p>\n<pre><code>div {\nwidth: 100px;\nheight: 100px;\nbackground: red;\n \n\/* For Safari 3.1 to 6.0 *\/\n-webkit-transition-property: width;\n-webkit-transition-duration: 2s;\n-webkit-transition-timing-function: linear;\n-webkit-transition-delay: 1s;\n \n\/* Standard syntax *\/\ntransition-property: width;\ntransition-duration: 2s;\ntransition-timing-function: linear;\ntransition-delay: 1s;\n}<\/code><\/pre>\n<p>\n  <strong>K\u00e4rki!<\/strong> Voit v\u00e4ltt\u00e4\u00e4 t\u00e4m\u00e4n h\u00e4lin\u00e4n k\u00e4ytt\u00e4m\u00e4ll\u00e4 kirjastoja, kuten <strong>-prefix-free<\/strong>. Se on JavaScript-kirjasto, joka lis\u00e4\u00e4 nykyisen selaimen etuliitteen mihin tahansa CSS-koodiin. Tutustu moniin sellaisiin kirjastoihin, jotka ovat saatavilla verkossa.\n<\/p>\n<h4>\n  Johtop\u00e4\u00e4t\u00f6s<br \/>\n<\/h4>\n<p>\n  Verkkosivustojen kehitt\u00e4j\u00e4t voivat k\u00e4ytt\u00e4\u00e4 animaatioita ja muunnoksia houkutellakseen k\u00e4ytt\u00e4ji\u00e4 verkkosivustoillesi. Voit k\u00e4ytt\u00e4\u00e4 niit\u00e4 parantamaan lomakkeita, ilmoituksia, taustagrafiikkaa, kuvia, kaavioita, logopiirroksia, toimintakehotuspainikkeita ja mit\u00e4 muuta ei. K\u00e4yt\u00e4 vain mielikuvitustasi ja voit l\u00f6yt\u00e4\u00e4 tavan h\u00e4mm\u00e4stytt\u00e4\u00e4 k\u00e4ytt\u00e4ji\u00e4si. Muista, ett\u00e4 pienikin muutos sivustossasi voi tehd\u00e4 siit\u00e4 paljon paremman n\u00e4k\u00f6isen ja kasvattaa sen arvoa. Oletko siis k\u00e4ytt\u00e4nyt animaatioita verkkosivustollasi? Jaa ajatuksesi animaatioiden ja siirtymien k\u00e4yt\u00f6st\u00e4.\n<\/p>\n<\/p>\n<div id=\"PostUnique_PostSource\" style=\"padding-top: 50px\">\n  : <a target=\"_blank\" rel=\"noopener nofollow\" data-pssr=\"\" href=\"http:\/\/www.instantshift.com\/2017\/10\/09\/css-animations-transitions\/\">instantshift.com<\/a>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Verkkosivujen suunnittelu kehittyy jatkuvasti. Responsiivisesta suunnittelusta, kauniista typografiasta, t\u00e4ydellisist\u00e4 v\u00e4rikoodauksista, kuvituksista, sivuston luojat keksiv\u00e4t uusia ideoita ja malleja joka p\u00e4iv\u00e4. K\u00e4ytt\u00e4jill\u00e4 on nyky\u00e4\u00e4n korkeat odotukset k\u00e4ytt\u00f6liittymi\u00e4 kohtaan Internetin kautta saatavilla olevan korkealaatuisen sis\u00e4ll\u00f6n vuoksi. Verkkosivustojen k\u00e4ytt\u00f6liittymien kehittyess\u00e4 kehittyy my\u00f6s niiden takana oleva tekniikka. Yksi t\u00e4rke\u00e4 komponentti, joka vastaa verkkosivuston k\u00e4ytt\u00f6liittym\u00e4n parantamisesta, on CSS. CSS tai Cascading Style Sheets tekev\u00e4t sivustoista paljon interaktiivisia m\u00e4\u00e4ritt\u00e4m\u00e4ll\u00e4 niiden tyylin, asettelun ja mallit. Uusin CSS-standardi eli CSS3 on ottanut k\u00e4ytt\u00f6\u00f6n k\u00e4sitteen \u2026<\/p>\n","protected":false},"author":1,"featured_media":191873,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[66,53,118],"tags":[],"class_list":["post-249742","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-6","category-web-ja-wordpress-2","category-web-tyokalut"],"_links":{"self":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249742","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/comments?post=249742"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/posts\/249742\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media\/191873"}],"wp:attachment":[{"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/media?parent=249742"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/categories?post=249742"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/fi\/wp-json\/wp\/v2\/tags?post=249742"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}