Sådan opretter du CSS Keyframe -animationer

CSS giver udviklere mulighed for at bringe deres websider til live ved hjælp af animationer til keyframes.

CSS -animation opnås ved at ændre den oprindelige tilstand af et HTML -element gennem dets forskellige egenskaber. Nogle generelle CSS -egenskaber, der kan animeres, omfatter:

se gratis film online uden registrering

Bredde
Højde
Position
Farve
Gennemsigtighed

Disse generelle CSS -egenskaber manipuleres af specifikke CSS -elementer for at skabe det ønskede resultat. Hvis du nogensinde er stødt på et animeret element på en webside, er chancerne stor for, at elementet blev animeret ved hjælp af tastaturrammer.

Hvad er et nøglerammerelement?

Det nøglerammer element kan bruges på et eller flere HTML -elementer, som den har adgang til. Det identificerer et specifikt punkt i et elements tilstand og dikterer det udseende, som dette element skal have på dette tidspunkt.

Det lyder måske som meget at fordøje, men det er faktisk ret simpelt. Det nøglerammer element har en ret ligetil struktur, der let kan forstås og justeres, så det passer til ethvert animationskrav.

Nøglerammer Struktureksempel

  
@keyframes identifier {  
from{  
/* where you would like the animation to start from. */  
}  
to{  
/* where you would like the animation to end up */  
}  
}

Lad os sige, at du vil animere en grøn rektangulær knap ved at gøre den til en blå rund knap.

Inden for parametrene for fra sektion ovenfor skal du placere al den styling, der er nødvendig for at elementet skal ligne en grøn rektangulær knap, derefter i til afsnit, stiller du alle krav til styling for at omdanne denne knap til en blå rund knap.

Hvis du tænker, lyder det ikke for meget som animation. Det skyldes, at en nøglekomponent i hele denne proces endnu ikke skal introduceres --- denne komponent er animationsejendommen.

Animationsejendommen

Det animationsejendom har et sæt forskellige underegenskaber; disse bruges i kombination med keyframes -strukturen ovenfor for at animere det ønskede HTML -element.

Du behøver dog kun at kende fem af disse underegenskaber og de værdier, der er knyttet til dem, for at opnå animation i dine projekter. Disse egenskaber er kendt som:

Animationsnavn
Animation-varighed
Animation-timing-funktion
Animation-forsinkelse
Animation-iteration-count

Brug af animation på en webside

Ved hjælp af scenariet ovenfor er målet at oprette en animeret knap.

Knap Animation Eksempel

  
  
  
  
  
  
Animation  
  
/* styling the button */  
.btn{  
color:white;  
border: none;  
font-size: 20px;  
width: 100px;  
height: 40px;  
padding: 10px 20px;  
/* animating the button */  
animation-name: clickButton;  
animation-duration: 5s;  
animation-delay: 4s;  
animation-iteration-count:infinite;  
animation-timing-function: ease-in-out;  
}  
/* styling the button states in the animation */  
@keyframes clickButton {  
from{  
background-color: springgreen;  
}  
to{  
border-radius: 30px;  
background: blue;  
}  
}  
  
  
  
  
Click!

Animationsafsnittet i koden ovenfor indeholder de fem underegenskaber, der blev nævnt tidligere. Hver ejendom har en meget tydelig funktion, og sammen arbejder de på at animere ethvert HTML -element, som de er målrettet mod.

Relateret: Sådan målretter du mod en del af en webside ved hjælp af CSS -vælgere

Egenskaben til animationsnavn

Denne ejendom er den vigtigste ejendom på listen. Uden animation-navn ejendom , ville du ikke have nogen identifikator til at forbi til nøglerammer element , hvilket gør al koden inden for dens parametre ubrugelig.

Hvis du har glemt at medtage en eller to af de andre underegenskaber, kan du stadig have en rimelig animation. Men hvis du har glemt animation-navn ejendom du ville ikke have en animation.

Ejendommen Animation-varighed

Denne egenskab bruges til at definere den tid, et animeret element skal tage, når der overføres fra en tilstand til den næste.

I eksemplet ovenfor er animation-varighed ejendom er indstillet til 5 sekunder (5s), så den grønne rektangulære knap vil have i alt 5 sekunder, før den helt bliver til en blå rund knap.

Egenskaben Animation-delay

Denne ejendom er vigtig på grund af en grund; Nogle websider kan tage et par sekunder at indlæse helt (på grund af flere forskellige faktorer). Så animation-forsinkelse ejendom forhindrer animationen i at starte med det samme, hvis websiden tager noget tid at indlæse.

I eksemplet ovenfor er animation-forsinkelse ejendom er indstillet til 4s, hvilket betyder, at animationen først begynder 4 sekunder efter, at websiden er besøgt (hvilket giver websiden nok tid til at indlæse, før animationen begynder).

Ejendommen Animation-iteration-count

Denne egenskab angiver, hvor mange gange det animerede element skal overgå fra en tilstand til den næste. Det animation-iteration-count ejendom tager værdier, der er ord og tal. Talværdien kan være alt fra 1 og opefter, mens ordværdien normalt er uendelig .

I eksemplet ovenfor er animation-iteration-count værdi er indstillet til uendelig , hvilket betyder, at så længe websiden er oppe, vil knapegenskaben hele tiden animere fra den ene tilstand til den anden.

Egenskaben Animation-timing-funktion

Denne egenskab dikterer bevægelsen af det animerede element, når det overgår fra en tilstand til den næste. Det animation-timing-funktion ejendom er normalt tildelt en af tre lette værdier.

Lette ind
Nemt
Let-ind-ud

Det værdi for let ind-ud bruges ovenfor; dette overfører langsomt animationen fra den ene tilstand til den anden. Hvis målet er at skabe en langsom overgang, når knappen omdannes fra et grønt rektangel til en blå cirkel, ville du bruge let værdi . Hvis du kun ville have den langsomme overgang i den modsatte retning, ville du bruge letværdige værdi .

Reduktion af vores kodeks

I de fleste tilfælde ses reduktion af et program som en praktisk tilgang. Dette skyldes hovedsageligt, at færre kodelinjer reducerer sandsynligheden for, at fejl går ubemærket hen i dine programmer.

Koden ovenfor kan reduceres med fire linjer. Dette kan opnås ved blot at bruge animationsejendommen uden eksplicit at identificere hver af dens underegenskaber.

Reducering af koden til knapanimationseksemplet

  
  
  
  
  
  
Animation  
  
/* styling the button */  
.btn{  
color: white;  
border: none;  
font-size: 20px;  
width: 100px;  
height: 40px;  
padding: 10px 20px;  
/* animating the button */  
animation: clickButton 5s ease-in-out 4s infinite;  
}  
/* styling the button states in the animation */  
@keyframes clickButton {  
from{  
background-color: springgreen;  
}  
to{  
border-radius: 30px;  
background: blue;  
}  
}  
  
  
  

				
				
				Kategori				 Programmering