Herätä verkkosivusi henkiin CSS-animaatioilla ja -siirtymillä

Viimeisin päivitys elo 13, 2023

Verkkosivujen suunnittelu kehittyy jatkuvasti. Responsiivisesta suunnittelusta, kauniista typografiasta, täydellisistä värikoodauksista, kuvituksista, sivuston luojat keksivät uusia ideoita ja malleja joka päivä.

Käyttäjillä on nykyään korkeat odotukset käyttöliittymiä kohtaan Internetin kautta saatavilla olevan korkealaatuisen sisällön vuoksi. Verkkosivustojen käyttöliittymien kehittyessä kehittyy myös niiden takana oleva tekniikka. Yksi tärkeä komponentti, joka vastaa verkkosivuston käyttöliittymän parantamisesta, on CSS.

CSS tai Cascading Style Sheets tekevät sivustoista paljon interaktiivisia määrittämällä niiden tyylin, asettelun ja mallit. Uusin CSS-standardi eli CSS3 on ottanut käyttöön animaatioiden ja muunnosten konseptin, jotka parantavat käyttökokemusta lisäämällä käyttöliittymään syvyyttä. CSS-animaatioiden ja siirtymien avulla voit kertoa tarinoita, luoda ylellisiä tehosteita ja tehdä käyttäjien vuorovaikutuksesta verkkosivustosi kanssa paljon tehokkaampaa ja merkityksellistä.

Animaatio on vain liikkeen simulaatio, joka luodaan näyttämällä sarjaa esineitä, kuten kuvia peräkkäin. Siirtyminen puolestaan on pohjimmiltaan prosessi, jossa objekti muuttuu tilasta toiseen. Mutta kun puhumme verkkoanimaatioista, niitä on periaatteessa kolmea tyyppiä – CSS-animaatioita tai avainkehysanimaatioita, CSS-siirtymiä ja JavaScript-animaatioita.

CSS-animaatioita

Animaatioiden luomiseksi CSS:ssä meidän on muutettava elementin, kuten kuvan tai tekstin, CSS-ominaisuuksia tietyksi ajaksi. Voimme muuttaa elementtien ominaisuuksia niin monta kertaa kuin haluamme ja voimme myös asettaa animaation keston.

Содержание показать

Määritetään @keyframes

CSS-animaatiot määritellään bittinä avainkehyksillä. Nämä avainkehykset ovat animaation välipisteitä. Kaikki CSS-animaatiot määritellään @keyframes-säännössä. Nämä avainkehykset määrittävät, mitä elementille tapahtuu tietyllä hetkellä, eli

mitkä ominaisuudet muuttuvat
kun elementti animoituu
kuinka elementti animoituu

Voit määrittää oman avainkehyksesi seuraavasti:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Tässä ”to” ja ”alkaen” määrittävät animaation alun ja lopun. Voimme myös määrittää animaatioita alun ja lopun välisille hetkille seuraavasti:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Tässä 0 % tarkoittaa animaation alkua, 100 % animaation loppua ja 50 % tarkoittaa muutosta alun ja lopun välillä. Mutta kuinka kerromme selaimelle, kuinka kauan animaation tulisi kestää? Teemme tämän tiettyjen animaatioominaisuuksien avulla. Nämä animaatioominaisuudet liittyvät animoitavaan elementtiin. Esimerkiksi:

element_name
{
animation_property: value;
style_property: value;
}

Tässä elementti voi olla mikä tahansa HTML-tunniste, kuten div, span, img, p jne. ja style_propertyse on mikä tahansa CSS-tyyliominaisuus, kuten background_color, width, height jne. Tarkastellaan nyt joitain animaatioominaisuuksia yksityiskohtaisesti.

@keyframes: Avainkehyksiä käytetään animaatiokoodin määrittämiseen edellä kuvatulla tavalla.
animation-name: @keyframes-kentällä määritetty nimi on animaation nimi. Tätä nimeä käytetään viittaamaan avainkehyksiin animoitavan elementin kanssa.
animation-duration: Sitä käytetään määrittämään animaation kesto sekunteina tai millisekunteina. Jos esimerkiksi asetamme sen arvoksi 5 sekuntia, animaatio kestää vain 5 sekuntia. Jos emme aseta tätä ominaisuutta, animaatio ei toimi ollenkaan, koska sen oletusarvo on 0.
animation-delay: Voimme viivyttää animaation alkamista määrittämällä animaation viiveajan. Jos esimerkiksi haluat aloittaa animaation 5 sekuntia sivun latautumisen jälkeen, aseta animaation viive arvoon 5 sekuntia.
animation-direction: Voimme kertoa selaimelle, liikkuuko animaatio päinvastaiseen suuntaan vai vuorotteleeko tämän ominaisuuden kanssa. Jos esimerkiksi haluat animaation jatkuvan alusta loppuun, aseta animaation keston arvoksi ”normaali”. Jos haluat sen jatkuvan alusta alkuun, aseta vain arvoksi ”käänteinen”.
animation-fill-mode: Voimme määrittää elementin tyylin, kun animaatiota ei toisteta tässä tilassa eli kun animaatio viivästyy tai päättyy, mikä elementin tyylin tulisi olla.
animation-itration-count: Tämä ominaisuus esittää kuinka monta kertaa animaatio voidaan toistaa. Jos esimerkiksi haluat toistaa animaation kerran, aseta sen arvoksi 1 tai jos haluat animaation jatkuvan ikuisesti, aseta se ’ääretön’.
animation-timing-function: Tätä ominaisuutta käytetään määrittämään animaation nopeuskäyrä, kuten lineaarinen, kiihtyvyys tai kiihtyvyyden vähentäminen.
Animaatio: Se on lyhenne ominaisuus kaikkien animaation ominaisuuksien asettamiseen.

Voit esimerkiksi animoida pomppivan objektin seuraavalla koodinpätkällä. Huomaa, kuinka tässä on käytetty animaatioiden lyhennettä.

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}
 
.stage:hover .object {
 animation: slide 2s linear;    /*shorthand animation property*/
}
 
.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Siirtymät

CSS-siirtymiä sovelletaan elementtien ominaisuuksiin tietyn ajan ajan perustuen tiettyihin ajoitustoimintoihin eli helpotustoimintoihin. Ajoitusfunktiolla tarkoitamme funktiota, joka muuttaa elementtien ominaisuuksia tilasta toiseen, kuten lineaarista etenemistä, kiihtyvyyttä tai hidastamista. Olet ehkä huomannut, että kuva liukuu tai muuttuu toiseksi kuvaksi hiiren osoituksesta tai ääni kuuluu hiiren napsautuksella. Nämä ovat kaikki siirtymätehosteita, jotka voivat tehdä verkkosivustosta interaktiivisen.

Helpotustoiminnot ovat tärkeitä siirtymien luomisessa. Ne määrittelevät, kuinka ominaisuudet muuttuvat. Ne voivat myös muuttaa nopeutta, jolla ominaisuuksien arvo muuttuu siirtymän aloituspisteestä loppupisteeseen. Voit käyttää siirtymiä seuraavalla tavalla:

element
{
style_property: value;
transition_property: value;
}

Tässä elementti määrittää HTML-elementin, jonka haluat muuntaa, kuten div, H1, img jne. style_property on kyseisessä elementissä käytetty CSS-tyyli. Katsotaanpa nyt joitain siirtymäominaisuuksia :

Transitio-ominaisuus: Siirtymätehostetta käytetään aina elementin CSS-ominaisuuteen, kuten sen leveyteen, korkeuteen, väriin tai muotoon. Tämän attribuutin arvo määrittää elementin CSS-ominaisuuden. Siirtymätehoste alkaa aina, kun tämä ominaisuus muuttuu, esimerkiksi hiiren osoitin tai napsautus.
Transit-timing-function: Tämä on elementtiin sovellettava helppoustoiminto. Tätä ominaisuutta käytetään määrittämään siirtymän nopeuskäyrä, kuten ease-in, ease-out, lineaarinen jne.
Transitio-duration: Se on aivan kuin animaatio-kestoominaisuus. Sitä käytetään määrittämään siirtymätehosteen kesto sekunteina tai millisekunteina. Jos esimerkiksi asetamme sen arvoksi 5 sekuntia, siirtymä vaikuttaa 5 sekuntiin. Jos emme aseta tätä ominaisuutta, siirtymää ei tapahdu ollenkaan, koska sen oletusarvo on 0.
Transitio-delay: Tällä ominaisuudella voimme määrittää keston siirtymävaikutuksen viivyttämiseen. Jos esimerkiksi haluat käynnistää tehosteen 5 sekuntia hiiren osoittamisen jälkeen, aseta siirtymäviive 5 sekuntiin.
siirtyminen: Se on lyhenne ominaisuus, jolla kaikki yllä olevat siirtymäominaisuudet asetetaan yhteen.

Esimerkiksi seuraava koodi muuttaa div-elementin leveyttä hiiren osoitin. Katso tässä käytetty siirtymän pikakirjoitusominaisuus.

div {
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Animaatiot vs. siirtymät

Animaatioiden ja siirtymien yhtäläisyydet

Sekä siirtymää että animaatiota käytetään elementin ominaisuuksien muutosten visualisointiin.
Voimme määrittää keston, kuinka kauan siirtymän ja animaation tulisi tapahtua.
Meillä on tiettyjä ajoitustoimintoja, joilla voidaan muuttaa arvosta toiseen siirtymisen nopeutta sekä siirtymissä että animaatioissa.

Erot animaatioiden ja siirtymien välillä

CSS-siirtymät ovat reaktiivisia. Ne on käynnistettävä käyttäjien toimesta. Toisaalta animaatiot toimivat aina, kun sivu latautuu selaimeen. Niitä ei tarvitse laukaista.
Siirtymät suoritetaan kerran ja pysähtyvät sitten. Sitten meidän on käynnistettävä ne uudestaan ja uudestaan, kun animaatiot voivat kiertää. He voivat aloittaa omalta pysäkiltä ja sitten aloittaa uudelleen.
Selain hoitaa siirtymät itse. Meidän on vain määritettävä siirtymän alku ja loppu. Voimme asettaa siirtymävaikutuksen, mutta emme voi muuttaa välisen siirtymän muutosnopeutta. Jos esimerkiksi kuva liukuu hiiren päällä, näemme sen vain häivyttävän sisään tai poistuvan, kun viemme hiiren sen päällä.
Animaatiot puolestaan tarjoavat joustavuutta muuttaa ominaisuuksia alun ja lopun välillä. Tämä tapahtuu avainkehysten avulla. Voimme esimerkiksi asettaa kuvan värin punaiseksi ensimmäiset 5 sekuntia, sitten siniseksi seuraavat 5 sekuntia, sitten vihreäksi seuraavat 5 sekuntia ja keltaiseksi viimeiset 5 sekuntia. Näin ollen voimme hallita animaatioita.

Myyjän etuliitteet

Kaikki selaimet eivät tue kaikkia CSS3-ominaisuuksia. Tästä syystä käytämme etuliitteitä näiden CSS-ominaisuuksien yhteydessä tietyille selaimille, kuten -webkit- (Safari), -moz- (Firefox) tai -o- (Opera). Näin selaimen merkit voivat lisätä tuen tälle CSS3-ominaisuudesta. Näitä etuliitteitä kutsutaan toimittajan etuliitteiksi tai CSS-selaimen etuliitteiksi. Siksi meidän on lisättävä myös toimittajan etuliitteet sekä animaatio- ja siirtymäominaisuudet. Harkitse esimerkiksi alla olevaa koodia ja katso, kuinka Safarin toimittajan etuliitteitä on käytetty:

div {
width: 100px;
height: 100px;
background: red;
 
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
 
/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Kärki! Voit välttää tämän hälinän käyttämällä kirjastoja, kuten -prefix-free. Se on JavaScript-kirjasto, joka lisää nykyisen selaimen etuliitteen mihin tahansa CSS-koodiin. Tutustu moniin sellaisiin kirjastoihin, jotka ovat saatavilla verkossa.

Johtopäätös

Verkkosivustojen kehittäjät voivat käyttää animaatioita ja muunnoksia houkutellakseen käyttäjiä verkkosivustoillesi. Voit käyttää niitä parantamaan lomakkeita, ilmoituksia, taustagrafiikkaa, kuvia, kaavioita, logopiirroksia, toimintakehotuspainikkeita ja mitä muuta ei. Käytä vain mielikuvitustasi ja voit löytää tavan hämmästyttää käyttäjiäsi. Muista, että pienikin muutos sivustossasi voi tehdä siitä paljon paremman näköisen ja kasvattaa sen arvoa. Oletko siis käyttänyt animaatioita verkkosivustollasi? Jaa ajatuksesi animaatioiden ja siirtymien käytöstä.

: instantshift.com