Üleminekud on CSS-i animatsiooni põhivorm, mida saate kasutada kaunite efektide loomiseks.

Võtmed kaasavõtmiseks

  • CSS-i üleminekud muudavad atribuutide väärtusi sujuvalt, lisades veebielementidele tagasisidet ja visuaalset atraktiivsust ning täiustades kasutuskogemust.
  • Üleminekuomadused, nagu ülemineku omadus, ülemineku kestus, ülemineku ajastuse funktsioon ja ülemineku viivitus, on üleminekute käitumise ja ajastuse kontrollimisel võtmetähtsusega.
  • Algajad peaksid alustama lihtsatest üleminekutest, mõistma kasti mudelit, planeerima üleminekud eelnevalt, optimeerige jõudluse jaoks, kaaluge juurdepääsetavust ja kasutage Chrome'i arendaja tööriistu sujuvaks tööks arengut.

Erakordsete veebisaitide loomine nõuab tasakaalu ahvatleva liidese ja kaasahaarava suhtluse vahel. Need interaktsioonid mängivad kasutajakogemuse kujundamisel suurt rolli. Arendajana kasutate selle saavutamiseks sageli erinevaid meetodeid. Nende hulgas paistavad CSS-i üleminekud silma kui üks lihtsamaid viise veebilehel lihtsate interaktsioonide loomiseks.

instagram viewer

Enne sujuvate interaktiivsete veebisaitide loomist peate mõistma CSS-i üleminekuid, atribuute, parimaid tavasid ja muud.

CSS-i üleminekute mõistmine

CSS-i üleminek muudab sujuvalt atribuudi väärtust, algolekust lõplikku, määratud aja jooksul. Sellised üleminekud lisavad veebielementidele tagasisidet ja visuaalset atraktiivsust ning võivad parandada kasutajakogemust. Üleminekud on üks paljudest funktsioonid, mida saate veebisaidi tundlikuks muutmiseks kasutada.

Üleminek toimub vastusena päästiksündmusele, näiteks kursoriga nupu kohal hõljutamine. Näiteks kui hõljutate kursorit nupu kohal, võib CSS-i üleminek muuta oma taustavärvi ühest olekust (esialgne) teise (lõplik). See üleminek toimub teie määratud aja jooksul, luues visuaalselt atraktiivse efekti.

Üleminekuomadused

Olenemata sellest, millist efekti üritate luua, peate mõistma saadaolevaid üleminekuomadusi. Saate neid kasutada oma üleminekute käitumise viimistlemiseks.

üleminekukinnisvara

See atribuut määrab, milline CSS-i atribuut (või atribuudid) üleminekuefekti läbivad. Saate loetleda mitu atribuuti, eraldades need komadega, et üheaegselt üle minna. Lisage konkreetne atribuudi nimi, et muuta ainult see atribuut ülemineku ajal. Või kasutage märksõna kõik kõigi üleminekut toetavate CSS-i atribuutide üleviimiseks.

Siin on süntaks:

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

üleminek-kestus

See atribuut määrab üleminekuefekti kestuse, määrates, kui kaua peaks animatsiooni valmimine aega võtma. Määrake väärtus sekundites (s) või millisekundites (ms), näiteks 0,5 s või 300 ms. See on süntaks:

transition-duration: time;

ülemineku-ajastamise-funktsioon

See atribuut juhib ülemineku ajastust, määratledes animatsiooni kiirenduse ja aeglustumise. Saate seda kasutada elementide kujundamisel erinevate leevendavate efektide loomiseks. Siin on mõned väärtused/ajastamise funktsioonid, mida proovida:

  • kergus: aeglane algus, siis kiire, siis aeglane lõpp (vaikeseade).
  • lineaarne: Püsiv kiirus.
  • kergendus: Aeglane algus.
  • leevendamine: Aeglane lõpp.
  • kergus sisse-välja: aeglane algus ja lõpp.

Siin on süntaks:

transition-timing-function: timing-function;

üleminek-viivitus

See omadus lisab viivituse enne ülemineku algust. Saate määrata väärtuse sekundites (s) või millisekundites (ms). Süntaks on:

transition-delay: time;

Need atribuudid juhivad ühiselt ülemineku käitumist, sealhulgas seda, millised omadused animeerivad ja kuidas täpselt animatsiooni ajastus käitub.

Lihtsate üleminekutega alustamine

CSS-i üleminekuomaduste mõistmine on üks asi, kuid kuidas need praktikas töötavad? Siin on mõned sammud, mida järgida, kui soovite üleminekuid kasutades elemendi stiili kujundada.

1. Valige oma HTML-element

Valige HTML-element, millele soovite üleminekut rakendada. See võib olla nupp, link, pilt või mõni muu element, millele soovite interaktiivse efekti lisada.

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

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

See märgistus annab teile põhilise vaikenupu töö alustamiseks:

2. Tuvastage üleminekuobjekt ja määrake algseisund

Määrake, millist valitud elemendi CSS-i atribuuti soovite animeerida, ja määrake CSS-i abil elemendi esialgne stiil. See olek näitab, kuidas element kuvatakse, kui kasutajad sellega ei suhtle.

<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>

Teie nupul on nüüd mõned stiilid, millega saate üleminekut harjutada:

3. Määrake hõljumise olek

Looge CSS-reegel, mis rakendub, kui hõljutate kursorit elemendi kohal. Muutke selle reegli raames teises etapis tuvastatud CSS-i atribuut lõplikule olekule.

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

4. Rakendage üleminekuomadused

Kasuta üleminekukinnisvara, üleminek-kestus, ja ülemineku-ajastamise-funktsioon atribuudid ülemineku üksikasjade täpsustamiseks.

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

See näide demonstreerib, kuidas luua lihtsat taustavärvi üleminekuga nuppu, mis käivitub, kui kursor selle kohal hõljub. Taustavärv läheb kergendava efektiga sujuvalt üle 0,5 sekundi jooksul sinisest punaseks. Näete selle täielikku mõju GitHub demo.

Kasutage neid samme alusena, et uurida oma veebiarendusprojektides keerukamaid üleminekuid ja animatsioone. Proovige mõnda projekti, kus saate kohandada märkeruutusid ja raadionuppe, õppige looma lihtsat akordioni, ja veel.

Parimad tavad ja näpunäited algajatele

Siin on mõned parimad tavad ja näpunäited, mis aitavad teil alustada tööd CSS-i üleminekutega.

  • Alusta lihtsate üleminekutega. Kui olete CSS-i üleminekutega uus, alustage lihtsate animatsioonidega, nagu värvimuutused või läbipaistmatuse reguleerimine. See aitab teil enne keerulisemate üleminekutega tegelemist põhitõdedest aru saada.
  • Saage aru kasti mudelist. Vii end kurssi CSS-kasti mudel, mis sisaldab selliseid omadusi nagu laius, kõrgus, polsterdus ja veeris. Nende omaduste toimimise mõistmine on elementide animeerimisel ülioluline.
  • Planeerige oma üleminekud. Enne üleminekute rakendamist planeerige, mida soovite saavutada. Üleminekuolekud, ajastus ja efektid visandage paberil või digitaalselt, et vältida tarbetuid katse-eksitusi.
  • Optimeerige jõudluse jaoks. Pöörake üleminekute kasutamisel tähelepanu jõudlusele. Vältige keerukate üleminekute ülekasutamist, eriti mobiilseadmetes, kuna need mõjutavad laadimisaegu ja kasutajakogemust.
  • Kaaluge juurdepääsetavust. Veenduge, et teie üleminekud oleksid kõigile kasutajatele juurdepääsetavad. Pakkuge alternatiivseid viise juurdepääsuks sisule või funktsioonidele, mis sõltuvad üleminekutest, eriti puuetega inimestele.
  • Kasutage Chrome'i arendaja tööriistu. Kasutage Chrome'i arendajatööriistu sujuvaks ülemineku arendamiseks. Kasutage DevToolsi ülemineku atribuutide kontrollimiseks ja muutmiseks reaalajas ja katsetage erinevaid ajastusfunktsioone.

Neid parimaid tavasid ja näpunäiteid järgides saate luua CSS-i üleminekutega töötamisel kindla aluse ja arendada järk-järgult oma oskusi, et luua köitvaid ja interaktiivseid veebikogemusi.

Brauseritevaheline ühilduvus

Brauseriülene ühilduvus on CSS-i üleminekutega töötamisel otsustava tähtsusega, et tagada teie animatsioonide ja interaktsioonide järjepidev toimimine erinevates veebibrauserites. Siin on mõned parimad tavad ja näpunäited brauseriülese ühilduvuse saavutamiseks CSS-i üleminekutega.

  • Kasutage tarnijapõhiste atribuutide jaoks eesliiteid. Erinevad brauserid võivad teatud CSS-i atribuutide jaoks nõuda hankija eesliiteid. Näiteks peate võib-olla kasutama -veebikomplekt- Safari ja Chrome'i jaoks -moz- Firefoxi jaoks ja -o- Opera jaoks. Lisage alati need eesliited, kui see on vajalik paljude brauserite katmiseks.
  • Testige mitmes brauseris. Testige oma üleminekuid regulaarselt erinevates brauserites, sh Chrome, Firefox, Safari, Edge ja Opera. Kasutage probleemide tuvastamiseks ja lahendamiseks brauseri arendaja tööriistu.
  • Kaasake üleminekutega animeerivate atribuutide varustiilid. Kui üleminekuid ei toetata, rakenduvad need stiilid.

Nende tavade järgimine võimaldab teil luua CSS-i üleminekuid, mis töötavad sujuvalt ja järjepidevalt erinevates brauserites.

Jätkake CSS-i üleminekutega harjutamist

Hoidke end kursis uusimate veebiarendustrendide ja CSS-i üleminekute parimate tavadega. Ainulaadsete efektide saavutamiseks võite vabalt katsetada erinevate üleminekuomaduste ja väärtustega. Õppimine hõlmab sageli katse-eksitusi, seega korrake ja kohandage oma üleminekuid aja jooksul.