CSS-siirtymäesimerkkejä - Kuinka käyttää hiiren animaatiota, muuttaa peittävyyttä ja paljon muuta

Jos työskentelet verkkotekniikoiden, kuten CSS: n, HTML: n ja JavaScriptin kanssa, on tärkeää, että sinulla on perustiedot CSS-animaatioista ja siirtymistä.

Tässä artikkelissa aiomme oppia tekemään joitain perussiirtymäanimaatioita CSS: n avulla.

Kuinka animoida elementti, jossa on perussiirtymä hiirellä

Tässä esimerkissä muutamme elementin peittävyyden, kun käyttäjä leijuu tai hiiren elementin päällä.

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

Tämä on yksinkertainen siirtymä, joka voidaan käynnistää, kun siirrämme hiiren elementin päälle. Voimme lisätä useita siirtymiä, jotka suoritetaan samanaikaisesti.

Lisätään skaalamuunnosominaisuus skaalasiirtymän lisäämiseksi elementtiin.

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

Siirtyminen ei kuitenkaan näytä sujuvalta, koska emme määrittäneet siirtymän kestoa tai käyttäneet mitään ajastustoimintoa.  

Jos lisäämme transitionominaisuuden, se saa elementin liikkumaan sujuvammin.

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

Tarkastellaan siirtymisomaisuuden toimintaa:

 transition: 500ms linear;
  • 500ms: siirtymän kesto millisekunteina
  • linear: ajoitustoiminto
div { transition:    ; }

Voimme lisätä muita vaihtoehtoja, kuten alla (esimerkkejä MDN: stä):

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

Joten mitä tämä koodi tekee?

  • siirtymisominaisuus: ominaisuus, jonka haluat animoida. Se voi olla mikä tahansa CSS osa kuten background, height, translateY, translateX, ja niin edelleen.
  • siirtymän kesto: siirtymän kesto
  • Siirtoviive: viive ennen siirtymisen alkamista

Voit oppia lisää transitionCSS: n eri käyttötavoista täältä.

Kuinka tehdä siirtymistä interaktiivisemmiksi animaatio-ominaisuuden ja avainkehysten avulla

Voimme tehdä enemmän CSS-siirtymillä, jotta tästä animaatiosta tulisi luovempi ja interaktiivisempi.

Kuinka siirtää elementti avainkehyksillä

Katsotaanpa esimerkkiä, jossa elementti siirtyy pisteestä A pisteeseen B. Käytämme 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 tämän saamme:

Tällä kertaa käytimme uusia ominaisuuksia, kuten animaatio ja avainkehykset. Käytimme animationominaisuutta animaation nimen ja keston määrittelemiseen, ja avainkehysten avulla voimme kuvata, kuinka elementin tulisi liikkua.

 animation: moveToRight 2s ease-in-out;

Tässä nimesin animaation moveToRight- mutta voit käyttää mitä tahansa haluamaasi nimeä. Kesto on 2s, ja ease-in-outon ajoitus funktio.

On muitakin ajastustoiminnot voit käyttää kuten ease-in, linear, ease-outjoka pohjimmiltaan tekee animaation tasaisempia. Voit oppia lisää ajoitustoiminnoista täältä.

@keyframesottaa animaation nimen. Tässä tapauksessa se on moveToRight.

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

keyframessuorittaa animaation kerrannaisina. Yllä olevassa esimerkissä prosenttiosuus edustaa siirtymien aluetta tai järjestystä. Voisimme myös käyttää fromja tomenetelmiä. kuten alla "

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

from edustaa animaation aloituskohtaa tai ensimmäistä vaihetta.

to on suoritettavan animaation loppupiste tai viimeinen vaihe.

Voit käyttää prosenttiosuutta joissakin tapauksissa. Oletetaan esimerkiksi, että haluat lisätä enemmän kuin kaksi siirtymää, jotka suoritetaan peräkkäin, kuten seuraava:

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

Voimme olla luovempia ja animoida monia ominaisuuksia samanaikaisesti, kuten seuraavassa esimerkissä:

Voit leikkiä ominaisuuksien ja animaatiotekniikoiden avulla hiekkalaatikossa täällä:

Ne ovat paljon enemmän asioita, joita voimme tehdä avainkehyksillä. Ensin lisätään lisää siirtymiä animaatioomme.

Kuinka animoida lisää ominaisuuksia ja sisällyttää ne siirtymään

Tällä kertaa animoimme taustan ja panemme elementin liikkumaan neliönmuotoisena. Annamme animaation ajaa ikuisesti käyttämällä infiniteominaisuutta ajoitustoimintona.

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

Hajotetaan se. Ensin lisätään infinitetekemään animaatio ajaa ikuisesti.

animation: moveToLeft 5s linear infinite;

Ja sitten jaamme animaation neljään vaiheeseen. Jokaisessa vaiheessa suoritamme eri siirtymän ja kaikki animaatiot suoritetaan peräkkäin.

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

Kun olet oppinut CSS-animaatioiden perustiedot, saatat haluta mennä pidemmälle ja tehdä monimutkaisempia asioita, jotka edellyttävät käyttäjän vuorovaikutusta. Tätä varten voit käyttää JavaScriptiä tai mitä tahansa kolmannen osapuolen animaatiokirjastoja siellä.

Hei, nimeni on Said Hayani. Loin tilauksen.io auttaakseni sisällöntuottajia, bloggaajia ja vaikuttajia kasvattamaan yleisöään uutiskirjeellä.