CSS-i üleminekunäited - kuidas hõljutada animatsiooni, muuta läbipaistmatust ja palju muud

Kui töötate veebitehnoloogiatega nagu CSS, HTML ja JavaScript, on oluline omada põhiteadmisi CSS-i animatsioonide ja üleminekute kohta.

Selles artiklis õpime, kuidas CSS-i abil teha mõnda põhilist üleminekuanimatsiooni.

Kuidas hõljumisel elementaarset elementi animeerida

Selles näites muudame elemendi läbipaistmatust, kui kasutaja viib elemendi kohale või hiirega üle selle.

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

See on lihtne üleminek, mille saab käivitada, kui hõljume elemendi kohal. Saame lisada mitu üheaegselt toimuvat üleminekut.

Lisame elemendile skaala ülemineku atribuudi Skaala teisendamine.

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

Kuid üleminek ei tundu olevat sujuv, sest me ei määratlenud ülemineku kestust ega kasutanud ühtegi ajastamisfunktsiooni.  

Kui lisame transitionatribuudi, paneb see elemendi sujuvamalt liikuma.

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

Jaotame, kuidas ülemineku vara töötab:

 transition: 500ms linear;
  • 500ms: ülemineku kestus millisekundites
  • linear: ajastusfunktsioon
div { transition:    ; }

Saame lisada rohkem valikuid, nagu allpool (näited MDN-st):

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

Mida see kood siis teeb?

  • üleminekuomand: vara, mida soovite animeerida. See võib olla ükskõik CSS element nagu background, height, translateY, translateXja nii edasi.
  • ülemineku kestus: ülemineku kestus
  • üleminekuviive: viivitus enne ülemineku algust

Siit saate lisateavet transitionCSS-i erinevate kasutusviiside kohta .

Kuidas muuta üleminekuid interaktiivsemaks animatsiooni atribuudi ja võtmekaadrite abil

CSS-i üleminekutega saame teha rohkem, et muuta see animatsioon loovamaks ja interaktiivsemaks.

Kuidas elementi võtmekaadritega teisaldada

Vaatame näidet, kus element liigub punktist A punkti B. Kasutame translateX ja 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); } } 

Ja seda me saame:

Seekord kasutasime uusi omadusi nagu animatsioon ja võtmekaadrid. Me kasutasime animationvara määratleda animatsioon nimi ja kestus ning keyframes andke meile kirjeldada, kuidas element peaks liikuma.

 animation: moveToRight 2s ease-in-out;

Siin nimetasin animatsiooni moveToRight- kuid võite kasutada mis tahes nime, mis teile meeldib. Kestus on 2sja ease-in-outon ajanäitamisfunktsioon.

On ka teisi viitefunktsiooni saate nagu ease-in, linear, ease-outmis põhimõtteliselt teha animatsiooni sujuvam. Ajastamisfunktsioonide kohta saate lisateavet siit.

@keyframesvõtab animatsiooni nime. Sel juhul on moveToRight.

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

keyframeskäivitab animatsiooni mitmekordse sammuna. Ülaltoodud näites kasutatakse protsentuaalset väärtust vahemike või üleminekute järjekorra tähistamiseks. Samuti võiksime kasutada fromja tomeetodeid. nagu allpool "

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

from tähistab animatsiooni alguspunkti või esimest sammu.

to on käivitatava animatsiooni lõpp-punkt või viimane samm.

Mõnel juhul võite kasutada protsenti. Oletame näiteks, et soovite lisada rohkem kui kaks järjestuses täidetavat üleminekut, näiteks järgmist:

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

Saame olla loovamad ja elustada korraga paljusid omadusi nagu järgmises näites:

Siin saab liivakastis omaduste ja animatsioonitehnikaga ringi mängida:

Need on veel palju asju, mida võtmekaadritega teha saame. Esiteks lisame oma animatsioonile rohkem üleminekuid.

Kuidas animeerida rohkem omadusi ja lisada need üleminekusse

Seekord animeerime tausta ja paneme elemendi liikuma ruudukujulisena. Paneme animatsiooni igaveseks jooksma, kasutades infinitevara ajastamisfunktsioonina.

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

Jagame selle laiali. Kõigepealt lisame, infiniteet animatsioon oleks igavesti kestev.

animation: moveToLeft 5s linear infinite;

Ja siis jagasime animatsiooni neljaks etapiks. Igal etapil käivitame erineva ülemineku ja kogu animatsioon töötab järjest.

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

Pärast CSS-i animatsioonide põhiosade õppimist võiksite minna kaugemale ja teha keerukamaid asju, mis nõuavad kasutaja suhtlemist. Selleks saate kasutada JavaScripti või mis tahes kolmandate osapoolte animatsiooniteeke.

Tere, minu nimi on Said Hayani. Ma lõin tellija.io, et aidata loojatel, blogijatel ja mõjutajatel uudiskirja kaudu oma vaatajaskonda kasvatada.