{"id":247968,"date":"2023-08-13T09:06:00","date_gmt":"2023-08-13T06:06:00","guid":{"rendered":"https:\/\/inform.click\/muutke-oma-veebilehed-ellu-css-animatsioonide-ja-uleminekutega\/"},"modified":"2023-08-13T09:59:00","modified_gmt":"2023-08-13T06:59:00","slug":"muutke-oma-veebilehed-ellu-css-animatsioonide-ja-uleminekutega","status":"publish","type":"post","link":"https:\/\/inform.click\/et\/muutke-oma-veebilehed-ellu-css-animatsioonide-ja-uleminekutega\/","title":{"rendered":"Muutke oma veebilehed ellu CSS-animatsioonide ja \u00fcleminekutega"},"content":{"rendered":"<p>\n  Veebilehe kujundus areneb pidevalt. Alates tundlikust disainist, ilusast t\u00fcpograafiast, t\u00e4iuslikest v\u00e4rvikoodiskeemidest ja illustratsioonidest pakuvad veebisaidi loojad iga p\u00e4ev uusi ideid ja kujundusi.\n<\/p>\n<p>\n  T\u00e4nap\u00e4eval on kasutajatel k\u00f5rged ootused kasutajaliideste suhtes, kuna nii k\u00f5rge kvaliteediga sisu on Internetis saadaval. Veebisaidi liideste arenedes areneb ka nende taga olev tehnoloogia. \u00dcks p\u00f5hikomponent, mis vastutab veebisaidi liidese t\u00e4iustamise eest, on <strong>CSS<\/strong>.\n<\/p>\n<p>\n  CSS v\u00f5i Cascading Style Sheets vastutavad selle eest, et saidid oleksid interaktiivsed, m\u00e4\u00e4ratledes nende stiili, paigutuse ja kujundused. CSS-i uusim standard, st CSS3, on kasutusele v\u00f5tnud <strong>animatsioonide<\/strong> ja <strong>teisenduste<\/strong> kontseptsiooni, mis t\u00e4iustavad kasutajakogemust, lisades kasutajaliidesele t\u00e4iendavat s\u00fcgavust. CSS-i animatsioonide ja \u00fcleminekutega saate jutustada lugusid, luua rikkalikke efekte ning muuta kasutajate suhtlus teie veebisaidiga t\u00f5husaks ja sisukaks.\n<\/p>\n<p>\n  Animatsioon on lihtsalt liikumise simulatsioon, mis luuakse objektide, n\u00e4iteks piltide \u00fcksteise j\u00e4rel kuvamisel. \u00dcleminek seevastu on p\u00f5him\u00f5tteliselt protsess, mille k\u00e4igus objekt muutub \u00fchest olekust teise. Kui aga r\u00e4\u00e4gime veebianimatsioonidest, on neid p\u00f5him\u00f5tteliselt kolme t\u00fc\u00fcpi \u2013 <strong>CSS-animatsioonid<\/strong> v\u00f5i v\u00f5tmekaadri animatsioonid, <strong>CSS-i \u00fcleminekud<\/strong> ja <strong>JavaScripti animatsioonid<\/strong>.\n<\/p>\n<p>\n  CSS-animatsioonid\n<\/p>\n<p>\n  Animatsioonide loomiseks CSS-is peame teatud aja jooksul muutma elemendi, n\u00e4iteks pildi v\u00f5i teksti CSS-i atribuute. Elementide omadusi saame muuta nii mitu korda kui tahame ja saame m\u00e4\u00e4rata ka animatsiooni kestuse.\n<\/p>\n<h5>\n  @keyframes m\u00e4\u00e4ramine<br \/>\n<\/h5>\n<p>\n  CSS-animatsioonid on m\u00e4\u00e4ratletud v\u00f5tmekaadritega. Need v\u00f5tmekaadrid on animatsiooni vahepunktid. K\u00f5ik CSS-animatsioonid on m\u00e4\u00e4ratud @keyframes reegli all. Need v\u00f5tmekaadrid m\u00e4\u00e4ravad, mis juhtub elemendiga konkreetsel hetkel, st\n<\/p>\n<ul>\n<li>millised omadused muutuvad\n  <\/li>\n<li>kui element animeerub\n  <\/li>\n<li>kuidas element animeerib\n  <\/li>\n<\/ul>\n<p>\n  Saate m\u00e4\u00e4rata oma v\u00f5tmekaadri j\u00e4rgmiselt:\n<\/p>\n<pre><code>@keyframes animation_name\n{\nfrom{ property: value; }\nto{ property: value; }\n}<\/code><\/pre>\n<p>\n  Siin &#8220;kuni&#8221; ja &#8220;alates&#8221; m\u00e4\u00e4ravad animatsiooni alguse ja l\u00f5pu. Samuti saame m\u00e4\u00e4rata animatsioonid vahepealsete ajahetkede jaoks alguse ja l\u00f5pu vahel j\u00e4rgmiselt:\n<\/p>\n<pre><code>@keyframes name\n{\n0%{ property: value; }\n50%{ property: value; }\n100%{ property: value; }\n}<\/code><\/pre>\n<p>\n  Siin t\u00e4histab 0% animatsiooni algust, 100% animatsiooni l\u00f5ppu ja 50% t\u00e4histab muutust alguse ja l\u00f5pu vahel. Kuidas aga \u00f6elda brauserile, kui kaua animatsioon peaks toimuma? Teeme seda teatud <strong>animatsiooniomaduste<\/strong> abil. Need animatsiooni omadused on seotud animeeritava elemendiga. N\u00e4iteks:\n<\/p>\n<pre><code>element_name\n{\nanimation_property: value;\nstyle_property: value;\n}<\/code><\/pre>\n<p>\n  Siin v\u00f5ib element olla mis tahes HTML-i silt, nagu div, span, img, p jne, ja <code>style_property<\/code>see on mis tahes CSS-i stiiliomadused, nagu background_color, laius, k\u00f5rgus jne. Vaatame n\u00fc\u00fcd m\u00f5nda animatsiooni atribuuti \u00fcksikasjalikumalt.\n<\/p>\n<ol>\n<li>\n    <strong>@keyframes<\/strong>: v\u00f5tmekaadreid kasutatakse animatsioonikoodi m\u00e4\u00e4ramiseks, nagu eespool kirjeldatud.\n  <\/li>\n<li>\n    <strong>animatsiooni nimi<\/strong>: @keyframes m\u00e4\u00e4ratud nimi on animatsiooni nimi. Seda nime kasutatakse animeeritava elemendiga v\u00f5tmekaadritele viitamiseks.\n  <\/li>\n<li>\n    <strong>animation-duration<\/strong>: seda kasutatakse animatsiooni kestuse m\u00e4\u00e4ramiseks sekundites v\u00f5i millisekundites. N\u00e4iteks kui m\u00e4\u00e4rame selle 5 sekundiks, kestab animatsioon ainult 5 sekundit. Kui me seda atribuuti ei m\u00e4\u00e4ra, siis animatsioon ei k\u00e4ivitu \u00fcldse, kuna selle vaikev\u00e4\u00e4rtus on 0.\n  <\/li>\n<li>\n    <strong>animation-delay<\/strong>: saame animatsiooni algust edasi l\u00fckata, m\u00e4\u00e4rates animatsiooni viivitusaja. N\u00e4iteks kui soovite animatsiooni k\u00e4ivitada 5 sekundit p\u00e4rast lehe brauseris laadimist, m\u00e4\u00e4rake animatsiooni viivitus 5 sekundiks.\n  <\/li>\n<li>\n    <strong>animation-direction<\/strong>: saame brauserile \u00f6elda, kas animatsioon liigub vastupidises suunas v\u00f5i vaheldub selle atribuudiga ts\u00fckleid. N\u00e4iteks kui soovite, et animatsioon t\u00f6\u00f6taks algusest l\u00f5puni, siis m\u00e4\u00e4rake animatsiooni kestuse v\u00e4\u00e4rtuseks &#8220;normaalne&#8221;. Kui soovite, et see t\u00f6\u00f6taks otsast alguseni, m\u00e4\u00e4rake lihtsalt v\u00e4\u00e4rtuseks &#8220;tagurpidi&#8221;.\n  <\/li>\n<li>\n    <strong>animation-fill-mode<\/strong>: Saame m\u00e4\u00e4rata elemendi stiili, kui animatsioon selles re\u017eiimis ei m\u00e4ngi, st kui animatsioon viibib v\u00f5i on l\u00f5ppenud, siis milline peaks olema elemendi stiil.\n  <\/li>\n<li>\n    <strong>animation-itration-count<\/strong>: see atribuut t\u00e4histab animatsiooni esitamise kordade arvu. N\u00e4iteks kui soovite animatsiooni esitada \u00fche korra, m\u00e4\u00e4rake selle v\u00e4\u00e4rtuseks 1 v\u00f5i kui soovite, et animatsiooni esitataks igavesti, m\u00e4\u00e4rake see lihtsalt olekusse &#8220;l\u00f5pmatu&#8221;.\n  <\/li>\n<li>\n    <strong>animation-timing-function<\/strong>: seda atribuuti kasutatakse animatsiooni kiirusk\u00f5vera (nt lineaarne, kiirendus v\u00f5i aeglustus) m\u00e4\u00e4ramiseks.\n  <\/li>\n<li>\n    <strong>Animatsioon<\/strong>: see on k\u00f5igi animatsiooni omaduste m\u00e4\u00e4ramise stenogramm.\n  <\/li>\n<\/ol>\n<p>\n  N\u00e4iteks saate p\u00f5rkavat objekti animeerida j\u00e4rgmise koodil\u00f5igu abil. Pange t\u00e4hele, kuidas siin on kasutatud animatsiooni stenogrammi.\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  \u00dcleminekud<br \/>\n<\/h3>\n<p>\n  CSS-i \u00fcleminekuid rakendatakse elementide omadustele teatud aja jooksul, mis p\u00f5hinevad teatud <strong>ajastusfunktsioonidel<\/strong> ehk kergendusfunktsioonidel. Ajastusfunktsiooni all peame silmas funktsiooni, mis muudab elementide omadusi \u00fchest olekust teise, nagu lineaarne progresseerumine, kiirendus v\u00f5i aeglustus. V\u00f5ib-olla olete m\u00e4rganud, et pilt libiseb v\u00f5i muutub teiseks pildiks, kui h\u00f5ljutage seda v\u00f5i hiirekl\u00f5psuga kostab heli. Need on k\u00f5ik \u00fcleminekuefektid, mis v\u00f5ivad muuta veebisaidi interaktiivseks.\n<\/p>\n<p>\n  <strong>Kergendusfunktsioonid<\/strong> on \u00fcleminekute loomisel olulised. Need t\u00e4psustavad, kuidas omadused muutuvad. Samuti v\u00f5ivad need muuta kiirust, millega omaduste v\u00e4\u00e4rtus muutub \u00fclemineku alguspunktist l\u00f5pp-punktini. Saate rakendada \u00fcleminekuid j\u00e4rgmisel viisil.\n<\/p>\n<pre><code>element\n{\nstyle_property: value;\ntransition_property: value;\n}<\/code><\/pre>\n<p>\n  Siin m\u00e4\u00e4rab element HTML-i elemendi, mida soovite teisendada (nt div, H1, img jne). style_property on sellele elemendile rakendatud CSS-stiil. Vaatame n\u00fc\u00fcd m\u00f5ningaid <strong>\u00fcleminekuomadusi<\/strong> :\n<\/p>\n<ul>\n<li>\n    <strong>transfer-property<\/strong>: \u00fcleminekuefekti rakendatakse alati elemendi CSS-i atribuudile, nagu selle laius, k\u00f5rgus, v\u00e4rv v\u00f5i kuju. Selle atribuudi v\u00e4\u00e4rtus m\u00e4\u00e4rab elemendi selle CSS-i omaduse. \u00dcleminekuefekt k\u00e4ivitub alati, kui see omadus muutub, n\u00e4iteks hiirekursori h\u00f5ljutamisel v\u00f5i kl\u00f5psamisel.\n  <\/li>\n<li>\n    <strong>\u00fclemineku-aja funktsioon<\/strong>: see on elemendile rakendatav lihtsusfunktsioon. Seda omadust kasutatakse \u00fclemineku kiirusk\u00f5vera m\u00e4\u00e4ramiseks, nagu sisse-, v\u00e4lja-, lineaar- jne.\n  <\/li>\n<li>\n    <strong>\u00fclemineku kestus<\/strong>: see on t\u00e4pselt nagu animatsiooni kestuse omadus. Seda kasutatakse \u00fcleminekuefekti kestuse m\u00e4\u00e4ramiseks sekundites v\u00f5i millisekundites. N\u00e4iteks kui seame selle v\u00e4\u00e4rtuseks 5 sekundit, toimub \u00fcleminek 5 sekundiga. Kui me seda atribuuti ei m\u00e4\u00e4ra, siis \u00fcleminekut ei toimu \u00fcldse, kuna selle vaikev\u00e4\u00e4rtus on 0.\n  <\/li>\n<li>\n    <strong>transfer-delay<\/strong>: selle atribuudiga saame m\u00e4\u00e4rata \u00fcleminekuefekti viivitamise aja. N\u00e4iteks kui soovite efekti k\u00e4ivitada 5 sekundit p\u00e4rast hiirekursori h\u00f5ljutamist, m\u00e4\u00e4rake \u00fclemineku viivitus 5 sekundiks.\n  <\/li>\n<li>\n    <strong>\u00fcleminek<\/strong>: see on stenogramm k\u00f5igi \u00fclaltoodud \u00fcleminekuomaduste koostamiseks.\n  <\/li>\n<\/ul>\n<p>\n  N\u00e4iteks muudab j\u00e4rgmine kood elemendi div laiust hiirekursoril. Vaadake siin rakendatud \u00fclemineku stenogrammi atribuuti.\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  Animatsioonid vs. \u00fcleminekud<br \/>\n<\/h3>\n<h5>\n  Animatsioonide ja \u00fcleminekute sarnasused<br \/>\n<\/h5>\n<ul>\n<li>Elemendi omaduste muutuste visualiseerimiseks kasutatakse nii \u00fcleminekut kui ka animatsiooni.\n  <\/li>\n<li>Saame m\u00e4\u00e4rata kestuse, kui kaua peaks \u00fcleminek ja animatsioon toimuma.\n  <\/li>\n<li>Meil on teatud ajastusfunktsioonid, et muuta nii \u00fcleminekute kui ka animatsioonide puhul \u00fchelt v\u00e4\u00e4rtuselt teisele \u00fclemineku kiirust.\n  <\/li>\n<\/ul>\n<h5>\n  Animatsioonide ja \u00fcleminekute erinevused<br \/>\n<\/h5>\n<ul>\n<li>CSS-i \u00fcleminekud on <strong>reaktiivsed<\/strong>. Need peavad kasutajad k\u00e4ivitama. Animatsioonid aga k\u00e4ivituvad alati, kui leht brauseris laaditakse. Neid ei pea k\u00e4ivitama.\n  <\/li>\n<li>\u00dcleminekud k\u00e4ivad korra ja peatuvad siis. Seej\u00e4rel peame neid ikka ja j\u00e4lle k\u00e4ivitama, samal ajal kui animatsioonid v\u00f5ivad <strong>ts\u00fcklit<\/strong> teha. Nad v\u00f5ivad alustada oma peatusest ja seej\u00e4rel uuesti alustada.\n  <\/li>\n<li>Brauser hoolitseb \u00fcleminekute eest ise. Peame lihtsalt t\u00e4psustama \u00fclemineku alguse ja l\u00f5pu. Me saame m\u00e4\u00e4rata \u00fcleminekuefekti, kuid me ei saa muuta vahepealse \u00fclemineku muutumise kiirust. N\u00e4iteks kui pilt libiseb hiire h\u00f5ljutamisel, n\u00e4eme, et see lihtsalt tuhmub v\u00f5i tuhmub, kui h\u00f5ljutame selle kohal.\n  <\/li>\n<li>Animatsioonid seevastu pakuvad paindlikkust omaduste muutmiseks alguse ja l\u00f5pu vahel. See juhtub v\u00f5tmekaadrite abil. N\u00e4iteks saame animatsiooni esimeseks 5 sekundiks m\u00e4\u00e4rata pildi v\u00e4rvi punaseks, j\u00e4rgmiseks 5 sekundiks siniseks, j\u00e4rgmiseks 5 sekundiks roheliseks ja viimaseks 5 sekundiks kollaseks. Seega on meil animatsioonide \u00fcle kontroll.\n  <\/li>\n<\/ul>\n<h5>\n  M\u00fc\u00fcja eesliited<br \/>\n<\/h5>\n<p>\n  K\u00f5ik CSS3 funktsioonid ei toeta k\u00f5iki brausereid. Seet\u00f5ttu kasutame nende CSS-i atribuutide k\u00f5rval eesliiteid teatud brauserite jaoks, nagu -webkit- (Safari), -moz- (Firefox) v\u00f5i -o- (Opera). See v\u00f5imaldab brauseri markeritel lisada sellele CSS3 funktsioonile toe. Neid eesliiteid nimetatakse <strong>tarnija prefiksideks<\/strong> v\u00f5i <strong>CSS-brauseri eesliiteteks<\/strong>. Seet\u00f5ttu peame koos animatsiooni- ja \u00fcleminekuomadustega panema ka m\u00fc\u00fcja eesliited. N\u00e4iteks vaadake allolevat koodi ja vaadake, kuidas on kasutatud Safari tarnija eesliiteid:\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>N\u00e4pun\u00e4ide!<\/strong> Saate seda segadust v\u00e4ltida, kui kasutate teeke, n\u00e4iteks <strong>-prefix-free<\/strong>. See on JavaScripti teek, mis lisab praeguse brauseri prefiksi mis tahes CSS-koodile. Vaadake paljusid selliseid veebis saadaolevaid teeke.\n<\/p>\n<h4>\n  J\u00e4reldus<br \/>\n<\/h4>\n<p>\n  Veebisaitide arendajad saavad kasutada animatsioone ja teisendusi, et meelitada kasutajaid teie veebisaitidele. Saate neid kasutada vormide, m\u00e4rguannete, taustagraafika, piltide, diagrammide, vigurlogode, tegevusele kutsuvate nuppude ja muu t\u00e4iustamiseks. Kasutage lihtsalt oma kujutlusv\u00f5imet ja leiate viisi, kuidas oma kasutajaid h\u00e4mmastada. Pidage meeles, et isegi v\u00e4ike muudatus teie veebisaidil v\u00f5ib muuta selle palju paremaks ja suurendada selle v\u00e4\u00e4rtust. Niisiis, kas olete oma veebisaidil juba animatsioone kasutanud? Jagage oma m\u00f5tteid animatsioonide ja \u00fcleminekute kasutamise kohta.\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>Veebilehe kujundus areneb pidevalt. Alates tundlikust disainist, ilusast t\u00fcpograafiast, t\u00e4iuslikest v\u00e4rvikoodiskeemidest ja illustratsioonidest pakuvad veebisaidi loojad iga p\u00e4ev uusi ideid ja kujundusi. T\u00e4nap\u00e4eval on kasutajatel k\u00f5rged ootused kasutajaliideste suhtes, kuna nii k\u00f5rge kvaliteediga sisu on Internetis saadaval. Veebisaidi liideste arenedes areneb ka nende taga olev tehnoloogia. \u00dcks p\u00f5hikomponent, mis vastutab veebisaidi liidese t\u00e4iustamise eest, on CSS. CSS v\u00f5i Cascading Style Sheets vastutavad selle eest, et saidid oleksid interaktiivsed, m\u00e4\u00e4ratledes nende stiili, paigutuse ja kujundused. Uusim CSS-i standard, see t\u00e4hendab CSS3, on kasutusele v\u00f5tnud kontseptsiooni \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":[65,117,52],"tags":[],"class_list":["post-247968","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css-5","category-veebitooriistad","category-web-ja-wordpress"],"_links":{"self":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts\/247968","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/comments?post=247968"}],"version-history":[{"count":0,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/posts\/247968\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/media\/191873"}],"wp:attachment":[{"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/media?parent=247968"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/categories?post=247968"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/inform.click\/et\/wp-json\/wp\/v2\/tags?post=247968"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}