Eksempler på CSS-overgang - Sådan bruges svæveranimation, ændring af opacitet og mere

Hvis du arbejder med webteknologier som CSS, HTML og JavaScript, er det vigtigt at have grundlæggende viden om CSS-animationer og overgange.

I denne artikel vil vi lære at lave nogle grundlæggende overgangsanimationer ved hjælp af CSS.

Sådan animeres et element med grundlæggende overgang til svævning

I dette eksempel ændrer vi opaciteten af ​​et element, når en bruger svæver eller mus over elementet.

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

Dette er en simpel overgang, der kan udløses, når vi svæver over elementet. Vi kan tilføje mere end en overgang, der kører på samme tid.

Lad os tilføje en skalatransformegenskab for at tilføje skalaovergang til elementet.

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

Men overgangen ser ikke ud til at være jævn, fordi vi ikke definerede varigheden af ​​overgangen eller bruger nogen timing-funktion.  

Hvis vi tilføjer transitionegenskaben, får det elementet til at bevæge sig mere jævnt.

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

Lad os nedbryde, hvordan overgangsejendommen fungerer:

 transition: 500ms linear;
  • 500ms: varigheden af ​​overgangen i millisekunder
  • linear: timing-funktionen
div { transition:    ; }

Vi kan tilføje flere muligheder som nedenfor (eksempler fra MDN):

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

Så hvad laver denne kode?

  • transition-property: den ejendom, du vil animere. Det kan være en hvilken som helst CSS element ligesom background, height, translateY, translateX, og så videre.
  • overgangsvarighed: varigheden af ​​overgangen
  • overgangsforsinkelse: forsinkelsen inden overgangen starter

Du kan lære mere om de forskellige anvendelser transitioni CSS her.

Hvordan man gør overgange mere interaktive ved hjælp af animationsegenskaben og keyframes

Vi kan gøre mere med CSS-overgange for at gøre denne animation mere kreativ og interaktiv.

Sådan flyttes et element med Keyframes

Lad os se på et eksempel, hvor elementet bevæger sig fra punkt A til punkt B. Vi bruger translateX og 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); } } 

Og det er hvad vi får:

Denne gang brugte vi nye egenskaber som animation og keyframes. Vi brugte animationegenskaben til at definere animationens navn og varighed, og keyframes lader os beskrive, hvordan elementet skal bevæge sig.

 animation: moveToRight 2s ease-in-out;

Her navngav jeg animationen moveToRight- men du kan bruge ethvert navn, du kan lide. Varigheden er 2sog ease-in-outer en tidsfunktion.

Der er andre timing-funktioner, du kan bruge som ease-in, linear, ease-outsom dybest set gør animationen glattere. Du kan lære mere om timingfunktionerne her.

@keyframestager navnet på animationen. I dette tilfælde er det moveToRight.

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

keyframesvil udføre animationen i flere trin. Eksemplet ovenfor bruger en procentdel til at repræsentere området eller rækkefølgen af ​​overgangene. Vi kunne også bruge fromog tometoder. som nedenfor "

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

from repræsenterer startpunktet eller det første trin i animationen.

to er slutpunktet eller det sidste trin i animationen, der skal udføres.

I nogle tilfælde vil du muligvis bruge en procentdel. Sig for eksempel, at du vil tilføje mere end to overgange, der udføres i en sekvens, som følgende:

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

Vi kan være mere kreative og animere mange egenskaber på samme tid som i følgende eksempel:

Du kan lege med egenskaber og animationsteknikker i sandkassen her:

De er mange flere ting, vi kan gøre med keyframes. Lad os først tilføje flere overgange til vores animation.

Sådan animeres flere egenskaber og inkluderer dem i overgangen

Denne gang animerer vi baggrunden, og vi får elementet til at bevæge sig i et firkantet mønster. Vi får animationen til at køre for evigt ved hjælp af infiniteejendommen som en tidsfunktion.

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

Lad os nedbryde det. Først tilføjer vi for infiniteat få animationen til at køre for evigt.

animation: moveToLeft 5s linear infinite;

Og så delte vi animationen i fire trin. Ved hvert trin kører vi en anden overgang, og al animationen kører i en rækkefølge.

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

Efter at have lært det grundlæggende i CSS-animationer, vil du måske gå videre og lave mere komplekse ting, der kræver brugerinteraktion. Til dette kan du bruge JavaScript eller andre animationsbiblioteker fra tredjepart derude.

Hej, mit navn er Said Hayani, jeg oprettede subscribi.io for at hjælpe skabere, bloggere og influencere med at udvide deres publikum gennem nyhedsbrev.