Kaip įgyvendinti CSS perėjimą: animacijos padaryta teisingai



Šis straipsnis suteiks jums išsamių ir išsamių žinių apie CSS perėjimus ir tai, kaip galite pridėti animacijas prie jo.

Animacijos tinklalapyje gali pritraukti daugiau vartotojų. Paklauskite savęs - jei pamatytumėte internetinį puslapį, kuriame būtų nemažai animacijos, ar nenorėtumėte daugiau tyrinėti? Dabar naudodami CSS perėjimus galite atgaivinti savo darbą naudodami puikias animacijas. Atminkite, kad tai reikia padaryti teisingai. Panagrinėkime CSS perėjimų pasaulį tokia tvarka:

Kodėl CSS perėjimai?

Paimkime pavyzdį. Jei pakeistumėte elemento spalvą iš baltos į mėlyną, šis pokytis yra beveik momentinis. Norėdami gauti daugiau animacinio efekto, galite atlikti šį pakeitimą palaipsniui. Tai atrodo ir vizualiai patraukli. Įgalinę CSS perėjimus galite pritaikyti pakeitimų atsiradimo būdą. Galite apibrėžti, kaip elementų pokyčiai vyksta tam tikrais laiko intervalais, einančiais po pagreičio kreivės.





CSS perėjimai leidžia apibrėžti pakeitimus elementai, konkretūs laiko intervalai, pagreičio kreivės greitis ir daug daugiau. Visa tai galite padaryti nenaudodami „Flash“ ar „JavaScript“ .

Norėdami geriau suprasti, galite kreiptis į toliau pateiktą paveikslėlį:



CSS perėjimasAukščiau esančiame paveikslėlyje HTML elementas per vieną sekundę pasikeis iš raudonos į mėlyną. Taip pat pamatysite tarpinę spalvą, kai vyksta perėjimas. Jei nenorite naudoti CSS perėjimų, pastebėsite, kad spalvos pasikeitimas iš raudonos į mėlyną yra momentinis - nematysite tarpinės spalvos. Su CSS perėjimais pastebėsite animuotą efektą, kai HTML elementai keičiasi iš senosios būsenos į naują.

Pereinamasis turtas

Galite naudoti stenografijos perėjimo ypatybę valdyti CSS perėjimus. Šio trumpinio naudojimas yra ne tik lengvas, bet ir gali išvengti nesinchronizuotų parametrų, kurie gali būti nemalonu derinti CSS.

Ypatybė „perėjimas“ nurodo CSS ypatybes, į kurias norite pereiti. Tik šios CSS ypatybės yra animuotos.



Sintaksė:

perėjimas:

Būdamas pradedančiuoju, galite susidurti su sunkumais naudodamiesi trumpiniu. Jei manote, kad dabar stenografijos naudojimas yra šiek tiek sudėtingas, galite atskirai nurodyti perėjimo ypatybes. HTML elementui galite nurodyti perėjimo ypatybes po vieną, kaip parodyta toliau pateiktame pavyzdyje:

div {plotis: 100px aukštis: 100px fonas: šviesiai mėlynos spalvos perėjimo ypatybė: plotio perėjimo trukmė: 2s pereinamojo laiko funkcija: linijinė perėjimo delsa: 1s} div: užveskite pelės žymeklį {plotis: 300px}

Užveskite pelės žymeklį virš dėžutės

Ankstesniame pavyzdyje mes atskirai nurodėme savybes (perėjimo savybė, perėjimo trukmė, perėjimo laiko funkcija ir perėjimo delsimas) ir jų vertes. Netrukus sužinosime apie šias perėjimo savybes.

Ką reikia nurodyti?

Norėdami sukurti CSS perėjimus, pirmiausia turite nurodyti du dalykus: CSS ypatybė, norinti pridėti efektą, ir to efekto trukmė.Turite nepamiršti vieno dalyko - nenurodžius laiko trukmės, perėjimas bus numatytasis 0 , ir jokio efekto nebus.

Panagrinėkime pavyzdį:

kas yra „salesforce service cloud“

Žemiau pateiktas kodas apibrėžia pločio ypatybės perėjimo efektą penkių sekundžių trukmei.

div {plotis: 100px aukštis: 100px fonas: mėlynas perėjimas: plotis 5s} div: užveskite pelės žymeklį {plotis: 600px}

Perkelkite žymeklį virš aukščiau esančio div elemento, kad pamatytumėte perėjimo efektą.

Pirmiau pateiktame kode pamatysite, kad užvedus pelės žymeklį ant mėlynos spalvos langelio, mėlynas langelis palaipsniui didina jo plotį penkias sekundes. Taip pat pastebėsite, kad nuėmus žymeklį iš mėlynos spalvos langelio, mėlynas langelis paliks pradinį dydį palaipsniui (ne iš karto). Taip pat galite pakeisti pločio ir laiko trukmės vertes, kad sužinotumėte, kaip ši perėjimo ypatybė veikia HTML elementą.

Taip pat galite pridėti perėjimo efektą prie daugiau nei vienos nuosavybės. Tai galite padaryti naudodami kablelius, kad atskirtumėte ypatybes. Panagrinėkime pavyzdį:

Žemiau esančiame kode nurodoma perėjimo ypatybė plotiui, aukščiui ir transformacijai.

div {padding: 15px plotis: 150px aukštis: 100px fonas: žalias perėjimas: plotis 2s, aukštis 2s, transformavimas 2s} div: hover {plotis: 300px aukštis: 200px transformavimas: pasukti (360deg)} Labas pasauli 

(Užveskite pelės žymeklį virš manęs)

Pateikdami aukščiau pateiktą pavyzdį, pamatysite, kaip judama žalia dėžutė, kai užvedate pelės žymeklį virš langelio.

Nurodėme tik nuosavybę ir laiko trukmę. Pažiūrėkime kitus parametrus su įvairiais pavyzdžiais.

Pereinamojo laiko funkcijos funkcija Funkcija

Ši savybė apibrėžia perėjimo efekto greičio kreivę. Tai gali būti šios vertės:

  • Lengva vertė: Tai yra numatytoji vertė, kai efektas yra lėtas pradžioje, vėliau greitesnis ir lėtai baigiasi.
  • Linijinė vertė: Šis efektas nekeičia perėjimo greičio - jis išlaiko greitį nuo pradžios iki pabaigos.
  • Lengva vertė: Šis efektas prasideda lėtai.
  • Lengvoji vertė: Šis efektas baigiasi lėtai.
  • Lengva įvažiuoti vertė: Šis efektas turi lėtą pradžią ir lėtą pabaigą.
  • Kubinio beziero vertė (n, n, n, n): Funkciją „Cubic-Bezier“ galite nurodyti savo verčių rinkinį.

Žemiau pateiktas kodas rodo linijinių, lengvumo, palengvinimo, palengvinimo ir paleidimo reikšmių perėjimo efektus.

div {plotis: 100px aukštis: 100px fonas: rožinis perėjimas: plotis 2s} # div1 {pereinamojo laiko funkcija: linijinė} # div2 {pereinamojo laiko funkcija: lengvumas} # div3 {pereinamojo laiko funkcija: lengvumas } # div4 {perėjimo laiko nustatymo funkcija: palengvinti} # div5 {perėjimo laiko nustatymo funkcija: palengvėjimo išėjimo} div: užveskite pelės žymeklį {plotis: 300 taškų}

Užveskite pelės žymeklį virš žemiau esančių „div“ elementų

linijinis
lengvumas
lengvumas
lengvumas
palengvėjimas

„Transition-Delay Property“

Kartais norite, kad animacija įvyktų po tam tikros trukmės. Ypatybė „Perėjimo vėlavimas“ leidžia nurodyti perėjimo efekto atidėjimą. Vėlavimą galite nurodyti sekundėmis.

Paimkime pavyzdį, kad pamatytume perėjimo efekto vėlavimą:

div {plotis: 100px aukštis: 100px fonas: geltonas perėjimas: plotis 3s perėjimo delsa: 1s} div: užveskite pelės žymeklį {plotis: 300px}

Užveskite pelės žymeklį virš žemiau esančio elemento „div“

kas yra paketas java

Pastaba: Galite pastebėti tą 1 sekundės vėlavimą prieš prasidedant efektui

Viršuje esančiame kode užvedę pelės žymeklį virš geltono langelio su žymekliu pastebėsite (vieną sekundę), kad jokio efekto nėra. Po vienos sekundės palaukimo pastebėsite efektą.

Tuo mes baigėme šį CSS perėjimų straipsnį. Dabar galite pridėti animacijas prie savo tinklalapių. Išbandykite šiuos pavyzdžius.

Patikrinkite mūsų kuris ateina su instruktorių vedamomis tiesioginėmis treniruotėmis ir realių projektų patirtimi. Šie mokymai leidžia išmokti dirbti su „back-end“ ir „front-end“ interneto technologijomis. Tai apima mokymus apie žiniatinklio plėtrą, „jQuery“, „Angular“, „NodeJS“, „ExpressJS“ ir „MongoDB“.

Turite mums klausimą? Prašau tai paminėti tinklaraščio „CSS perėjimas“ komentarų skyriuje ir mes su jumis susisieksime.