Perėjimai yra pagrindinė CSS animacijos forma, kurią galite naudoti kurdami gražius efektus.

Key Takeaways

  • CSS perėjimai sklandžiai keičia nuosavybės vertes, prideda atsiliepimų ir vizualinio patrauklumo žiniatinklio elementams bei pagerina vartotojo patirtį.
  • Perėjimo savybės, pvz., perėjimo savybė, perėjimo trukmė, perėjimo laiko funkcija ir perėjimo delsa, yra labai svarbios kontroliuojant perėjimų elgesį ir laiką.
  • Pradedantieji turėtų pradėti nuo paprastų perėjimų, suprasti dėžutės modelį, iš anksto suplanuoti perėjimus, optimizuokite našumą, apsvarstykite pritaikymą neįgaliesiems ir naudokite „Chrome“ kūrėjo įrankius, kad viskas vyktų sklandžiai plėtra.

Kuriant išskirtines svetaines reikalinga pusiausvyra tarp patrauklios sąsajos ir įtraukiančios sąveikos. Šios sąveikos vaidina svarbų vaidmenį formuojant vartotojo patirtį. Kaip kūrėjas, norėdami tai pasiekti, dažnai pasikliaukite įvairiais būdais. Tarp jų CSS perėjimai išsiskiria kaip vienas iš paprasčiausių būdų sukurti paprastas sąveikas tinklalapyje.

instagram viewer

Prieš pradėdami kurti vientisas interaktyvias svetaines, turėsite suprasti CSS perėjimus, savybes, geriausią praktiką ir dar daugiau.

CSS perėjimų supratimas

CSS perėjimas per tam tikrą laiką sklandžiai pakeičia nuosavybės vertę iš pradinės būsenos į galutinę. Tokie perėjimai suteikia žiniatinklio elementams grįžtamąjį ryšį ir vizualinį patrauklumą bei gali pagerinti vartotojo patirtį. Perėjimai yra vienas iš daugelio funkcijos, kurias galite naudoti, kad svetainė būtų interaktyvi.

Perėjimas įvyksta reaguojant į paleidimo įvykį, pavyzdžiui, užvedus pelės žymeklį virš mygtuko. Pavyzdžiui, užvedus pelės žymeklį virš mygtuko, CSS perėjimas gali pakeisti fono spalvą iš vienos būsenos (pradinės) į kitą (galutinę). Šis perėjimas vyksta per jūsų nurodytą trukmę, sukuriant vizualiai patrauklų efektą.

Pereinamosios savybės

Nepriklausomai nuo to, kokį efektą bandote sukurti, turite suprasti galimas perėjimo savybes. Juos galite naudoti norėdami patikslinti savo perėjimų elgseną.

pereinamasis turtas

Ši ypatybė nustato, kuriai CSS nuosavybei (ar ypatybėms) bus taikomas perėjimo efektas. Galite nurodyti kelias ypatybes, atskirtas kableliais, kad būtų galima pereiti vienu metu. Įtraukite konkretaus ypatybės pavadinimą, kad perėjimo metu pasikeistų tik ta ypatybė. Arba naudokite raktinį žodį visi perkelti visas CSS ypatybes, kurios palaiko perėjimą.

Štai sintaksė:

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

pereinamasis laikotarpis

Ši savybė nustato perėjimo efekto trukmę, nurodydama, kiek laiko turi užtrukti animacija. Nurodykite reikšmę sekundėmis (s) arba milisekundėmis (ms), pvz 0,5 sek arba 300 ms. Tai yra sintaksė:

transition-duration: time;

perėjimo laiko funkcija

Ši savybė valdo perėjimo laiką, apibrėždama animacijos pagreitį ir lėtėjimą. Galite naudoti jį kurdami elementų stilių, kad sukurtumėte skirtingus lengvinimo efektus. Štai keletas verčių / laiko funkcijų, kurias reikia išbandyti:

  • lengvumas: lėta pradžia, tada greita, tada lėta pabaiga (numatytasis).
  • linijinis: pastovus greitis.
  • palengvinimas: Lėta pradžia.
  • palengvinimas: Lėta pabaiga.
  • lengvumas į išorę: Lėta pradžia ir pabaiga.

Štai sintaksė:

transition-timing-function: timing-function;

perėjimas-delsimas

Ši savybė įveda delsą prieš prasidedant perėjimui. Galite nurodyti reikšmę sekundėmis (s) arba milisekundėmis (ms). Sintaksė yra tokia:

transition-delay: time;

Šios savybės bendrai valdo, kaip veikia perėjimas, įskaitant tai, kurios ypatybės animuoja ir kaip tiksliai veikia animacijos laikas.

Paprastų perėjimų pradžia

Suprasti CSS perėjimo ypatybes yra vienas dalykas, bet kaip jos veikia praktiškai? Štai keli veiksmai, kurių reikia atlikti, kai norite sukurti elemento stilių naudodami perėjimus.

1. Pasirinkite savo HTML elementą

Pasirinkite HTML elementą, kuriam norite taikyti perėjimą. Tai gali būti mygtukas, nuoroda, vaizdas ar bet koks kitas elementas, kuriam norite pridėti interaktyvų efektą.

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

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

Šis žymėjimas suteiks jums pagrindinį numatytąjį mygtuką, su kuriuo galėsite pradėti dirbti:

2. Nustatykite pereinamą nuosavybę ir apibrėžkite pradinę būseną

Nustatykite, kurią pasirinkto elemento CSS ypatybę norite animuoti, ir nustatykite pradinį elemento stilių naudodami CSS. Ši būsena parodo, kaip elementas atrodo, kai vartotojai su juo nesąveikauja.

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

Dabar mygtukas turės keletą stilių, kuriuos galėsite praktikuoti naudodami:

3. Nurodykite svyravimo būseną

Sukurkite CSS taisyklę, kuri bus taikoma užvedus pelės žymeklį virš elemento. Pagal šią taisyklę pakeiskite CSS ypatybę, kurią nustatėte atlikdami antrąjį veiksmą, į galutinę būseną.

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

4. Taikyti pereinamojo laikotarpio ypatybes

Naudoti pereinamasis turtas, pereinamasis laikotarpis, ir perėjimo laiko funkcija ypatybes, kad nurodytumėte perėjimo detales.

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

Šiame pavyzdyje parodyta, kaip sukurti paprastą mygtuką su fono spalvos perėjimu, kuris paleidžiamas, kai žymeklis užvedamas virš jo. Fono spalva sklandžiai pereina iš mėlynos į raudoną per 0,5 sekundės su švelninimo efektu. Galite pamatyti visą jo poveikį GitHub demo.

Naudokite šiuos veiksmus kaip pagrindą, norėdami ištirti sudėtingesnius perėjimus ir animacijas savo žiniatinklio kūrimo projektuose. Išbandykite kai kuriuos projektus, kur galite tinkinti žymimuosius laukelius ir radijo mygtukus, išmokti kurti paprastą akordeoną, ir dar.

Geriausia praktika ir patarimai pradedantiesiems

Štai keletas geriausių praktikos pavyzdžių ir patarimų, kurie padės pradėti dirbti su CSS perėjimais.

  • Pradėkite nuo paprastų perėjimų. Jei pirmą kartą naudojate CSS perėjimus, pradėkite nuo paprastos animacijos, pvz., spalvų keitimo ar neskaidrumo koregavimo. Tai padės suprasti pagrindus prieš sprendžiant sudėtingesnius perėjimus.
  • Supraskite dėžutės modelį. Susipažinkite su CSS dėžutės modelis, kuri apima tokias savybes kaip plotis, aukštis, užpildymas ir paraštė. Animuojant elementus labai svarbu suprasti, kaip veikia šios savybės.
  • Suplanuokite savo perėjimus. Prieš įgyvendindami perėjimus, suplanuokite, ko norite pasiekti. Popieriuje arba skaitmeniniu būdu nubraižykite perėjimo būsenas, laiką ir efektus, kad išvengtumėte nereikalingų bandymų ir klaidų.
  • Optimizuokite našumui. Naudodami perėjimus atkreipkite dėmesį į našumą. Venkite per daug naudoti sudėtingus perėjimus, ypač mobiliuosiuose įrenginiuose, nes jie turi įtakos įkėlimo laikui ir naudotojų patirčiai.
  • Apsvarstykite prieinamumą. Užtikrinkite, kad jūsų perėjimai būtų prieinami visiems vartotojams. Pateikite alternatyvius būdus pasiekti turinį arba funkcijas, kurios priklauso nuo perėjimo, ypač neįgaliesiems.
  • Naudokite „Chrome“ kūrėjo įrankius. Išnaudokite visas „Chrome“ kūrėjo įrankių galimybes sklandžiai perėjimui kurti. Naudokite DevTools, kad patikrintumėte ir pakeistumėte perėjimo ypatybes realiuoju laiku ir eksperimentuokite su įvairiomis laiko funkcijomis.

Vadovaudamiesi šiais geriausios praktikos pavyzdžiais ir patarimais, galite sukurti tvirtą pagrindą dirbti su CSS perėjimais ir palaipsniui tobulinti savo įgūdžius, kad sukurtumėte patrauklią ir interaktyvią žiniatinklio patirtį.

Suderinamumas tarp naršyklių

Kelių naršyklių suderinamumas yra labai svarbus dalykas dirbant su CSS perėjimais, siekiant užtikrinti, kad jūsų animacija ir sąveika veiktų nuosekliai įvairiose žiniatinklio naršyklėse. Štai keletas geriausių praktikos pavyzdžių ir patarimų, kaip pasiekti kelių naršyklių suderinamumą su CSS perėjimais:

  • Naudokite prefiksus konkrečioms pardavėjo savybėms. Skirtingose ​​naršyklėse tam tikroms CSS ypatybėms gali reikėti tiekėjo prefiksų. Pavyzdžiui, jums gali tekti naudoti -Webkit- „Safari“ ir „Chrome“, -moz- skirta „Firefox“ ir -o- operai. Visada įtraukite šiuos priešdėlius, kai reikia, kad apimtumėte daugybę naršyklių.
  • Išbandykite keliose naršyklėse. Reguliariai tikrinkite perėjimus įvairiose naršyklėse, įskaitant „Chrome“, „Firefox“, „Safari“, „Edge“ ir „Opera“. Naudokite naršyklės kūrėjo įrankius problemoms nustatyti ir išspręsti.
  • Įtraukite atsarginius ypatybių, kurios animuojasi su perėjimais, stilius. Jei perėjimai nepalaikomi, bus taikomi šie stiliai.

Laikydamiesi šios praktikos galite sukurti CSS perėjimus, kurie sklandžiai ir nuosekliai veiktų įvairiose naršyklėse.

Praktikuokite su CSS perėjimais

Sekite naujausias žiniatinklio kūrimo tendencijas ir geriausią CSS perėjimų praktiką. Nesivaržykite eksperimentuoti su skirtingomis perėjimo savybėmis ir reikšmėmis, kad pasiektumėte unikalių efektų. Mokymasis dažnai apima bandymus ir klaidas, todėl laikui bėgant kartokite ir koreguokite savo perėjimus.