Prehodi so osnovna oblika animacije CSS, ki jo lahko uporabite za ustvarjanje čudovitih učinkov.

Ključni zaključki

  • Prehodi CSS gladko spreminjajo vrednosti lastnosti, dodajajo povratne informacije in vizualno privlačnost spletnim elementom ter izboljšujejo uporabniško izkušnjo.
  • Lastnosti prehoda, kot so prehod-lastnost, prehod-trajanje, prehod-časovna-funkcija in prehod-zakasnitev, so ključne pri nadzoru obnašanja in časa prehodov.
  • Začetniki naj začnejo s preprostimi prehodi, razumejo model škatle, načrtujejo prehode vnaprej, optimizirajte za zmogljivost, razmislite o dostopnosti in uporabite Chromova orodja za razvijalce za nemoteno razvoj.

Ustvarjanje izjemnih spletnih mest zahteva ravnotežje med privlačnim vmesnikom in privlačnimi interakcijami. Te interakcije igrajo pomembno vlogo pri oblikovanju uporabniške izkušnje. Kot razvijalec se boste za to pogosto zanašali na različne metode. Med njimi izstopajo prehodi CSS kot eden najlažjih načinov za ustvarjanje preprostih interakcij na spletni strani.

instagram viewer

Potrebovali boste razumevanje prehodov CSS, lastnosti, najboljših praks in še več, preden lahko začnete izdelovati brezhibna, interaktivna spletna mesta.

Razumevanje prehodov CSS

Prehod CSS gladko spremeni vrednost lastnosti, iz začetnega stanja v končno, v določenem času. Takšni prehodi spletnim elementom dodajo povratne informacije in vizualno privlačnost ter lahko izboljšajo uporabniško izkušnjo. Prehodi so eni izmed mnogih funkcije, s katerimi lahko naredite spletno mesto odzivno.

Prehod se pojavi kot odgovor na sprožilni dogodek, kot je premikanje miške nad gumb. Na primer, ko miškin kazalec premaknete nad gumb, lahko prehod CSS spremeni barvo ozadja iz enega stanja (začetno) v drugo (končno). Ta prehod se zgodi v trajanju, ki ga določite, kar ustvari vizualno privlačen učinek.

Lastnosti prehoda

Ne glede na učinek, ki ga želite ustvariti, morate razumeti lastnosti prehoda, ki so na voljo. Te lahko uporabite za natančno nastavitev obnašanja svojih prehodov.

prehod-lastnina

Ta lastnost določa, katera lastnost (ali lastnosti) CSS bo podvržena učinku prehoda. Za sočasni prehod lahko navedete več lastnosti, ločenih z vejicami. Vključite določeno ime lastnosti, da se med prehodom spremeni samo ta lastnost. Ali pa uporabite ključno besedo vse za prehod vseh lastnosti CSS, ki podpirajo prehod.

Tukaj je sintaksa:

transition-property: property1, property2, ...;

prehod-trajanje

Ta lastnost nastavi trajanje učinka prehoda in določi, kako dolgo naj traja dokončanje animacije. Podajte vrednost z uporabo sekund (s) ali milisekund (ms), na primer 0,5s oz 300 ms. To je sintaksa:

transition-duration: time;

prehodna časovna funkcija

Ta lastnost nadzira časovni razpored prehoda ter določa pospešek in pojemek animacije. Uporabite ga lahko v slogu elementov, da ustvarite različne učinke sproščanja. Tukaj je nekaj vrednosti/časovnih funkcij, ki jih lahko preizkusite:

  • enostavnost: Počasen začetek, nato hiter, nato počasen konec (privzeto).
  • linearni: Konstantna hitrost.
  • olajšanje: Počasen začetek.
  • olajšanje: Počasen konec.
  • ease-in-out: Počasen začetek in konec.

Tukaj je sintaksa:

transition-timing-function: timing-function;

prehod-zamik

Ta lastnost uvaja zakasnitev pred začetkom prehoda. Vrednost lahko določite v sekundah (s) ali milisekundah (ms). Sintaksa je:

transition-delay: time;

Te lastnosti skupaj nadzorujejo, kako se obnaša prehod, vključno s tem, katere lastnosti se animirajo in kako natančno se obnaša čas animacije.

Kako začeti s preprostimi prehodi

Razumevanje lastnosti prehoda CSS je ena stvar, toda kako delujejo v praksi? Tukaj je nekaj korakov, ki jih morate upoštevati, kadar koli želite oblikovati element s prehodi.

1. Izberite svoj element HTML

Izberite element HTML, za katerega želite uporabiti prehod. To je lahko gumb, povezava, slika ali kateri koli drug element, ki mu želite dodati interaktivni učinek.

html>
<html>
<head>
<style>
 /* CSS goes here */
style>
head>
<body>

<buttonclass="transition-button">Hover Mebutton>
body>
html>

Ta oznaka vam bo dala osnovni, privzeti gumb za začetek dela:

2. Identificirajte lastnost za prehod in definirajte začetno stanje

Določite, katero lastnost CSS izbranega elementa želite animirati, in s pomočjo CSS nastavite začetni slog elementa. To stanje predstavlja, kako je element videti, ko uporabniki z njim ne komunicirajo.

<style>
/* Identify the property (background-color) */
.transition-button {
 /* Define the initial state */
 background-color: blue;
 color: white;
 padding: 10px 20px;
 border: none;
 cursor: pointer;
}
style>

Vaš gumb bo zdaj imel nekaj slogov, s katerimi lahko vadite prehod:

3. Določite stanje lebdenja

Ustvarite pravilo CSS, ki velja, ko miškin kazalec premaknete nad element. Znotraj tega pravila spremenite lastnost CSS, ki ste jo identificirali v drugem koraku, v končno stanje.

<style>
/* Specify the hover state */
.transition-button: hover {
 background-color: red;
}
style>

4. Uporabite lastnosti prehoda

Uporabi prehod-lastnina, prehod-trajanje, in prehodna časovna funkcija lastnosti, da določite podrobnosti prehoda.

<style>
.transition-button {
 /* Specify transition properties */
 transition-property: background-color;
 transition-duration: 0.5s;
 transition-timing-function: ease;
}
style>

Ta primer prikazuje, kako ustvariti preprost gumb s prehodom barve ozadja, ki se zažene, ko se kazalec premakne nad njim. Barva ozadja gladko prehaja iz modre v rdečo v 0,5 sekunde z učinkom popuščanja. Na tem lahko vidite celoten učinek GitHub demo.

Uporabite te korake kot osnovo za raziskovanje kompleksnejših prehodov in animacij v vaših projektih spletnega razvoja. Poskusite nekaj projektov, kjer lahko prilagodite potrditvena polja in izbirne gumbe, naučite se ustvariti preprosto harmoniko, in več.

Najboljše prakse in nasveti za začetnike

Tukaj je nekaj najboljših praks in nasvetov, ki vam bodo pomagali začeti delati s prehodi CSS.

  • Začnite s preprostimi prehodi. Če ste novi pri prehodih CSS, začnite z enostavnimi animacijami, kot so spremembe barv ali prilagoditve motnosti. Pomagal vam bo razumeti osnove, preden se lotite bolj zapletenih prehodov.
  • Razumeti model škatle. Seznanite se z okvirni model CSS, ki vključuje lastnosti, kot so širina, višina, oblazinjenje in rob. Razumevanje delovanja teh lastnosti je ključnega pomena pri animiranju elementov.
  • Načrtujte svoje prehode. Pred izvedbo prehodov načrtujte, kaj želite doseči. Prehodna stanja, čas in učinke skicirajte na papir ali digitalno, da se izognete nepotrebnim poskusom in napakam.
  • Optimizirajte za učinkovitost. Pri uporabi prehodov bodite pozorni na zmogljivost. Izogibajte se pretirani uporabi zapletenih prehodov, zlasti na mobilnih napravah, saj vplivajo na čas nalaganja in uporabniško izkušnjo.
  • Razmislite o dostopnosti. Poskrbite, da bodo vaši prehodi dostopni vsem uporabnikom. Zagotovite alternativne načine za dostop do vsebin ali funkcij, ki so odvisne od prehodov, zlasti za osebe s posebnimi potrebami.
  • Uporabite Chromova orodja za razvijalce. Izkoristite Chromova orodja za razvijalce za brezhiben razvoj prehoda. Uporabite DevTools za pregled in spreminjanje lastnosti prehoda v realnem času in eksperimentirajte z različnimi časovnimi funkcijami.

Z upoštevanjem teh najboljših praks in nasvetov lahko zgradite trdne temelje pri delu s prehodi CSS in postopoma razvijete svoje sposobnosti za ustvarjanje privlačnih in interaktivnih spletnih izkušenj.

Združljivost med brskalniki

Združljivost med brskalniki je ključnega pomena pri delu s prehodi CSS, da zagotovite dosledno delovanje vaših animacij in interakcij v različnih spletnih brskalnikih. Tukaj je nekaj najboljših praks in nasvetov za doseganje združljivosti med brskalniki s prehodi CSS:

  • Uporabite predpone za lastnosti, specifične za prodajalca. Različni brskalniki lahko zahtevajo predpone prodajalca za določene lastnosti CSS. Na primer, morda boste morali uporabiti -webkit- za Safari in Chrome, -moz- za Firefox in -o- za Opera. Vedno vključite te predpone, kadar je to potrebno, da pokrijete široko paleto brskalnikov.
  • Preizkusite v več brskalnikih. Redno preizkušajte svoje prehode v različnih brskalnikih, vključno s Chromom, Firefoxom, Safarijem, Edgeom in Opera. Za prepoznavanje in odpravljanje težav uporabite orodja za razvijalce brskalnika.
  • Vključite nadomestne sloge za lastnosti, ki animirajo s prehodi. Če prehodi niso podprti, bodo uporabljeni ti slogi.

Upoštevanje teh praks vam omogoča ustvarjanje prehodov CSS, ki delujejo gladko in dosledno v različnih brskalnikih.

Še naprej vadite s prehodi CSS

Bodite na tekočem z najnovejšimi trendi spletnega razvoja in najboljšimi praksami pri prehodih CSS. Prosto eksperimentirajte z različnimi lastnostmi prehoda in vrednostmi, da dosežete edinstvene učinke. Učenje pogosto vključuje poskuse in napake, zato sčasoma ponavljajte in prilagajajte svoje prehode.