Primjeri CSS prijelaza - Kako koristiti animaciju lebdenja, promijeniti neprozirnost i još mnogo toga

Ako radite s web tehnologijama poput CSS-a, HTML-a i JavaScript-a, važno je imati neko osnovno znanje o CSS animacijama i prijelazima.

U ovom ćemo članku naučiti kako napraviti neke osnovne prijelazne animacije pomoću CSS-a.

Kako animirati element s osnovnim prijelazom pri zadržavanju pokazivača

U ovom ćemo primjeru izmijeniti neprozirnost elementa kada korisnik zadrži pokazivač miša ili miša.

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

Ovo je jednostavan prijelaz koji se može pokrenuti kada zadržimo pokazivač iznad elementa. Možemo dodati više prijelaza koji će se istodobno izvoditi.

Dodajmo svojstvo transformiranja razmjere kako bismo elementu dodali prijelaz razmjere.

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

No, čini se da prijelaz nije gladak, jer nismo definirali trajanje prijelaza niti upotrijebili bilo kakvu vremensku funkciju.  

Ako dodamo transitionsvojstvo, učinit će da se element lakše kreće.

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

Razmotrimo kako funkcionira svojstvo prijelaza:

 transition: 500ms linear;
  • 500ms: trajanje prijelaza u milisekundama
  • linear: funkcija vremena
div { transition:    ; }

Možemo dodati još opcija kao u nastavku (primjeri iz MDN-a):

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

Pa, što ovaj kod radi?

  • prijelazno svojstvo: svojstvo koje želite animirati. To može biti bilo CSS elemenata kao što su background, height, translateY, translateX, i tako dalje.
  • prijelaz-trajanje: trajanje prijelaza
  • prijelaz-kašnjenje: kašnjenje prije početka prijelaza

Ovdje možete saznati više o različitim namjenama transitionCSS-a.

Kako prijelaze učiniti interaktivnijim koristeći svojstvo animacije i ključne okvire

Možemo učiniti više s CSS prijelazima kako bismo ovu animaciju učinili kreativnijom i interaktivnijom.

Kako premjestiti element pomoću ključnih okvira

Pogledajmo primjer gdje se element kreće od točke A do točke B. Koristit ćemo translateX i 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); } } 

I evo što dobivamo:

Ovaj put koristili smo nova svojstva poput animacije i ključnih okvira. animationSvojstvo smo koristili za definiranje naziva i trajanja animacije, a ključni okviri opisuju kako bi se element trebao kretati.

 animation: moveToRight 2s ease-in-out;

Ovdje sam nazvao animaciju moveToRight- ali možete koristiti bilo koje ime koje želite. Trajanje je 2si ease-in-outjest vremenska funkcija.

Postoje i drugi timing funkcije koje možete koristiti kao ease-in, linear, ease-outkoji u osnovi čine animacija glatko. Ovdje možete saznati više o vremenskim funkcijama.

@keyframesuzima naziv animacije. U ovom slučaju je moveToRight.

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

keyframesizvršit će animaciju u više koraka. Gornji primjer koristi postotak za predstavljanje raspona ili redoslijeda prijelaza. Mi također može koristiti fromi tometode. kao ispod "

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

from predstavlja početnu točku ili prvi korak animacije.

to je krajnja točka ili posljednji korak animacije koji treba izvršiti.

U nekim ćete slučajevima možda htjeti upotrijebiti postotak. Na primjer, recimo da želite dodati više od dva prijelaza koji će se izvoditi u nizu, poput sljedećeg:

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

Možemo biti kreativniji i istovremeno animirati mnoga svojstva kao u sljedećem primjeru:

Ovdje se možete poigrati svojstvima i tehnikama animacije u pješčaniku:

Puno je više stvari koje možemo učiniti s ključnim kadrovima. Prvo, dodajmo još prijelaza u našu animaciju.

Kako animirati više svojstava i uključiti ih u prijelaz

Ovaj put ćemo animirati pozadinu i učinit ćemo da se element pomiče u kvadratnom uzorku. Napravit ćemo da se animacija vječno koristi, koristeći infinitesvojstvo kao vremensku funkciju.

      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); } } 

Razdvojimo to. Prvo dodajemo infinitekako bi animacija vječno radila.

animation: moveToLeft 5s linear infinite;

A zatim smo animaciju podijelili u četiri koraka. U svakom ćemo koraku pokrenuti drugačiji prijelaz i sva će se animacija izvoditi u slijedu.

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

Nakon što naučite osnovne CSS animacije, možda ćete htjeti ići dalje i napraviti složenije stvari koje zahtijevaju korisničku interakciju. Za to možete koristiti JavaScript ili bilo koju drugu biblioteku animacija koja postoji vani.

Bok, moje ime je Said Hayani. Stvorio sam subscrib.io kako bih pomogao kreatorima, blogerima i influencerima da povećaju svoju publiku putem biltena.