CSS perėjimo pavyzdžiai - kaip naudoti žymeklio animaciją, pakeisti neskaidrumą ir dar daugiau

Jei dirbate su tokiomis interneto technologijomis kaip CSS, HTML ir „JavaScript“, svarbu turėti keletą pagrindinių žinių apie CSS animacijas ir perėjimus.

Šiame straipsnyje mes sužinosime, kaip padaryti keletą pagrindinių perėjimo animacijų naudojant CSS.

Kaip animuoti elementą su pagrindiniu perėjimu ant svyravimo

Šiame pavyzdyje pakeisime elemento neskaidrumą, kai vartotojas užveda pelės žymeklį virš pelės žymeklio arba užveda pelę ant jo.

      Static Template   .elem { background: blueviolet; width: 300px; height: 150px; } .elem:hover { opacity: 0.5; } 

Tai yra paprastas perėjimas, kurį galima suaktyvinti, kai mes užvedame virš elemento. Galime pridėti daugiau nei vieną perėjimą, kuris bus vykdomas vienu metu.

Pridėkime skalės transformacijos savybę, kad elementui pridėtume mastelio perėjimą.

 .elem:hover { transform: scale(1.1); }

Tačiau atrodo, kad perėjimas nėra sklandus, nes mes neapibrėžėme perėjimo trukmės ir nenaudojome jokios laiko funkcijos.  

Jei pridėsime transitionnuosavybę, tai leis elementui judėti sklandžiau.

 .elem { background: blueviolet; width: 300px; height: 150px; margin: 20px auto; transition: 500ms linear; }

Išskaidykime, kaip veikia pereinamoji nuosavybė:

 transition: 500ms linear;
  • 500ms: perėjimo trukmė milisekundėmis
  • linear: laiko funkcija
div { transition:    ; }

Galime pridėti daugiau parinkčių, tokių kaip toliau (MDN pavyzdžiai):

#delay { transition-property: font-size; transition-duration: 4s; transition-delay: 2s; }

Taigi, ką daro šis kodas?

  • nuosavybė pereinamasis: turtas, kurį norite animuoti. Tai gali būti bet CSS elementas, kaip background, height, translateY, translateX, ir tt.
  • perėjimo trukmė: perėjimo trukmė
  • perėjimo vėlavimas: vėlavimas prieš prasidedant perėjimui

Čia galite sužinoti daugiau apie skirtingus transitionCSS naudojimo būdus .

Kaip padaryti perėjimus interaktyvesnius naudojant animacijos ypatybes ir pagrindinius kadrus

Norėdami padaryti šią animaciją kūrybiškesnę ir interaktyvesnę, galime padaryti daugiau naudodami CSS perėjimus.

Kaip perkelti elementą naudojant „Keyframes“

Pažvelkime į pavyzdį, kai elementas juda iš taško A į tašką B. Mes naudosime translateX ir translateY.

      Static Template   .elem { background: orange; width: 300px; height: 150px; animation: moveToRight 2s ease-in-out; animation-delay: 1000ms; } @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } } 

Tai mes gauname:

Šį kartą naudojome naujas savybes, tokias kaip animacija ir raktiniai kadrai. Mes naudojome animationypatybę apibrėždami animacijos pavadinimą ir trukmę, o pagrindiniai kadrai apibūdino, kaip elementas turėtų judėti.

 animation: moveToRight 2s ease-in-out;

Čia aš pavadinau animaciją moveToRight- bet jūs galite naudoti bet kokį vardą, kuris jums patinka. Trukmė yra 2s, ir ease-in-outyra laiko funkcija.

Yra ir kitų laiko funkcijos, kurias galite naudoti, kaip ease-in, linear, ease-outkuri iš esmės padaryti animacija sklandžiau. Čia galite sužinoti daugiau apie laiko funkcijas.

@keyframesimasi animacijos pavadinimo. Šiuo atveju taip yra moveToRight.

 @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }

keyframesanimaciją vykdys keliais žingsniais. Aukščiau pateiktame pavyzdyje procentais nurodomas perėjimų diapazonas arba tvarka. Mes taip pat galėtume naudoti fromir tometodus. kaip žemiau “

 @keyframes moveToRight { from { transform: translateX(0px); } to { transform: translateX(300px); } }

from žymi animacijos pradžios tašką arba pirmąjį žingsnį.

to yra galutinis animacijos, kurią reikia vykdyti, taškas arba paskutinis žingsnis.

Kai kuriais atvejais galite naudoti procentą. Pvz., Tarkime, kad norite pridėti daugiau nei du perėjimus, kurie bus vykdomi iš eilės, pavyzdžiui:

 @keyframes moveToRight { 0% { transform: translateX(0px); } 50% { transform: translateX(150px); } 100% { transform: translateX(300px); } }

Mes galime būti kūrybingesni ir animuoti daugybę savybių tuo pačiu metu, kaip šiame pavyzdyje:

Čia galite žaisti su savybėmis ir animacijos metodais smėlio dėžėje:

Tai dar daugybė dalykų, kuriuos galime padaryti naudodami pagrindinius kadrus. Pirmiausia pridėkime daugiau perėjimų prie savo animacijos.

Kaip animuoti daugiau savybių ir įtraukti jas į perėjimą

Šį kartą animuosime foną ir priversime elementą judėti kvadratiniu piešiniu. Mes sukursime animaciją visam laikui, naudodami infinitenuosavybę kaip laiko funkciją.

      Static Template   .elem { background: orange; width: 250px; height: 250px; border-radius: 10px; animation: moveToLeft 5s linear infinite; animation-delay: 1000ms; } @keyframes moveToLeft { 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); } 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } 50% { transform: translateY(200px) translateX(400px); background: linear-gradient(to top, #30cfd0 0%, #330867 100%); } 75% { transform: translateX(0px) translateY(200px); background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } 100% { transform: translateY(0px); } } 

Sugrupuokime. Pirmiausia pridedame infinite, kad animacija būtų vykdoma amžinai.

animation: moveToLeft 5s linear infinite;

Tada suskirstėme animaciją į keturis žingsnius. Kiekviename žingsnyje atliksime skirtingą perėjimą ir visa animacija bus vykdoma nuosekliai.

  • First step: set the element horizontally to translateX(0px), and change the background to the gradient.
 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); }
  • The second animation will move the element from the left to the right and change the background color.
 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
  • The third animation will move the element down using translateY and change the background color again.
  • In the fourth step, the element will move back to the left and change the background color.
  • In the fifth animation the element should go back to its original place.

Wrapping up

In this article, we covered various things you can do with CSS transitions. You can use CSS transitions in many ways in your applications to create a better user experience.

Išmokę pagrindinius CSS animacijų variantus, galite pereiti daugiau ir atlikti sudėtingesnius dalykus, kuriems reikalinga vartotojo sąveika. Tam galite naudoti „JavaScript“ arba bet kokias trečiųjų šalių animacijos bibliotekas.

Sveiki, mano vardas Saidas Hayani. Aš sukūriau Subsi.io, kad padėčiau kūrėjams, tinklaraštininkams ir influenceriams auginti auditoriją per naujienlaiškį.