CSS-overgangsvoorbeelden - Hoe u Hover-animatie kunt gebruiken, de dekking kunt wijzigen en meer

Als u werkt met webtechnologieën zoals CSS, HTML en JavaScript, is het belangrijk om wat basiskennis te hebben over CSS-animaties en overgangen.

In dit artikel gaan we leren hoe we enkele basisovergangsanimaties kunnen maken met CSS.

Een element animeren met een basisovergang bij zweven

In dit voorbeeld zullen we de ondoorzichtigheid van een element laten veranderen wanneer een gebruiker met de muis over het element zweeft of muilt.

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

Dit is een eenvoudige overgang die kan worden geactiveerd wanneer we de muisaanwijzer over het element bewegen. We kunnen meer dan één overgang toevoegen die tegelijkertijd wordt uitgevoerd.

Laten we een eigenschap schaaltransformatie toevoegen om schaalovergang aan het element toe te voegen.

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

Maar de overgang lijkt niet soepel te verlopen, omdat we de duur van de overgang niet hebben gedefinieerd of een timingfunctie hebben gebruikt.  

Als we de transitioneigenschap toevoegen, zal het element soepeler bewegen.

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

Laten we eens kijken hoe de overgangseigenschap werkt:

 transition: 500ms linear;
  • 500ms: de duur van de overgang in milliseconden
  • linear: de timing-functie
div { transition:    ; }

We kunnen meer opties toevoegen zoals hieronder (voorbeelden uit de MDN):

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

Dus wat doet deze code?

  • transition-property: de eigenschap die u wilt animeren. Het kan elke CSS element iets dergelijks zijn background, height, translateY, translateX, en ga zo maar door.
  • overgangsduur: de duur van de overgang
  • overgangsvertraging: de vertraging voordat de overgang begint

U kunt hier meer lezen over de verschillende toepassingen van transitionin CSS.

Overgangen interactiever maken met de animatie-eigenschap en keyframes

We kunnen meer doen met CSS-overgangen om deze animatie creatiever en interactiever te maken.

Hoe u een element verplaatst met keyframes

Laten we eens kijken naar een voorbeeld waarbij het element van punt A naar punt B beweegt. We zullen translateX en translateY gebruiken.

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

En dit is wat we krijgen:

Deze keer hebben we nieuwe eigenschappen gebruikt, zoals animatie en keyframes. We hebben de animationeigenschap gebruikt om de naam en duur van de animatie te definiëren, en met keyframes kunnen we beschrijven hoe het element moet bewegen.

 animation: moveToRight 2s ease-in-out;

Hier heb ik de animatie genoemd moveToRight- maar je kunt elke naam gebruiken die je maar wilt. De duur is 2s, en ease-in-outis een timingfunctie.

Er zijn andere timing functies die u kunt gebruiken, zoals ease-in, linear, ease-outdie in feite maken de animatie gladder. U kunt hier meer lezen over de timingfuncties.

@keyframesneemt de naam van de animatie. In dit geval is het moveToRight.

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

keyframeszal de animatie in veelvoudige stappen uitvoeren. In het bovenstaande voorbeeld wordt een percentage gebruikt om het bereik of de volgorde van de overgangen weer te geven. We kunnen ook de methoden fromen togebruiken. zoals hieronder "

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

from vertegenwoordigt het startpunt of de eerste stap van de animatie.

to is het eindpunt of de laatste stap van de animatie die moet worden uitgevoerd.

In sommige gevallen wilt u misschien een percentage gebruiken. Stel dat u bijvoorbeeld meer dan twee overgangen wilt toevoegen die in een reeks worden uitgevoerd, zoals de volgende:

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

We kunnen creatiever zijn en veel eigenschappen tegelijkertijd animeren, zoals in het volgende voorbeeld:

Je kunt hier spelen met eigenschappen en animatietechnieken in de sandbox:

Er zijn nog veel meer dingen die we kunnen doen met keyframes. Laten we eerst meer overgangen aan onze animatie toevoegen.

Hoe u meer eigenschappen kunt animeren en opnemen in de overgang

Deze keer animeren we de achtergrond en laten we het element in een vierkant patroon bewegen. We laten de animatie voor altijd draaien door de infiniteeigenschap als een timingfunctie te gebruiken.

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

Laten we het opsplitsen. Eerst voegen we toe infiniteom de animatie voor altijd te laten draaien.

animation: moveToLeft 5s linear infinite;

En toen splitsten we de animatie in vier stappen. Bij elke stap voeren we een andere overgang uit en alle animaties worden in een reeks afgespeeld.

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

Nadat je de basis van CSS-animaties hebt geleerd, wil je misschien verder gaan en complexere dingen maken die gebruikersinteractie vereisen. Hiervoor kunt u JavaScript of animatiebibliotheken van derden gebruiken.

Hallo, mijn naam is Said Hayani. Ik heb subscribi.io gemaakt om makers, bloggers en influencers te helpen hun publiek te laten groeien via een nieuwsbrief.