CSS-keyframe-animaties maken

CSS geeft ontwikkelaars de mogelijkheid om hun webpagina's tot leven te brengen met behulp van keyframes-animatie.

CSS-animatie wordt bereikt door de beginstatus van een HTML-element te wijzigen via zijn verschillende eigenschappen. Enkele algemene CSS-eigenschappen die kunnen worden geanimeerd, zijn onder meer:

wat zijn de dingen op de achterkant van de telefoons van mensen?

Breedte
Hoogte
Positie
Kleur
dekking

Deze algemene CSS-eigenschappen worden gemanipuleerd door specifieke CSS-elementen om het gewenste resultaat te creëren. Als u ooit een geanimeerd element op een webpagina bent tegengekomen, is de kans groot dat het element is geanimeerd met behulp van keyframes-animatie.

Wat is een keyframe-element?

De keyframes-element kan worden gebruikt op een of meer HTML-elementen waartoe het toegang heeft. Het identificeert een specifiek punt in de staat van een element en dicteert het uiterlijk dat dit element op dit moment moet hebben.

Dit klinkt misschien als veel om te verteren, maar het is eigenlijk vrij eenvoudig. De keyframes-element heeft een vrij eenvoudige structuur die gemakkelijk kan worden begrepen en aangepast aan alle animatie-eisen.

Voorbeeld hoofdframestructuur

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

Stel dat u een groene rechthoekige knop wilt animeren door er een blauwe ronde knop van te maken.

Binnen de parameters van de van sectie hierboven moet je alle styling plaatsen die nodig is om het element eruit te laten zien als een groene rechthoekige knop, dan in de tot sectie, plaatst u alle stijlvereisten om deze knop om te zetten in een blauwe ronde knop.

Als je nadenkt, klinkt dat niet te veel als animatie. Welnu, dat komt omdat een belangrijk onderdeel van dit hele proces nog moet worden geïntroduceerd --- dit onderdeel is de animatie-eigenschap.

De Animatie-eigenschap

De animatie-eigenschap heeft een reeks verschillende subeigenschappen; deze worden gebruikt in combinatie met de bovenstaande keyframes-structuur om het gewenste HTML-element te animeren.

U hoeft echter maar vijf van deze subeigenschappen en de bijbehorende waarden te kennen om animatie in uw projecten te realiseren. Deze eigenschappen staan bekend als:

Animatienaam
Animatieduur
Animatie-timing-functie
Animatie-vertraging
Animatie-iteratie-telling

Animatie gebruiken op een webpagina

Met behulp van het bovenstaande scenario is het doel om een geanimeerde knop te maken.

Voorbeeld van knopanimatie

  
  
  
  
  
  
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!

Het animatiegedeelte van de bovenstaande code bevat de vijf subeigenschappen die eerder zijn genoemd. Elke eigenschap heeft een heel aparte functie en samen werken ze om elk HTML-element te animeren waarop ze zijn gericht.

Gerelateerd: Een deel van een webpagina targeten met CSS-kiezers

De eigenschap Animation-name

Deze eigenschap is de belangrijkste eigenschap op de lijst. Zonder de eigenschap animatienaam , je zou geen identifier hebben om door te geven aan de keyframes-element , waardoor alle code binnen zijn parameters onbruikbaar wordt.

Als je bent vergeten een of twee van de andere sub-eigenschappen op te nemen, heb je misschien nog steeds een redelijk fatsoenlijke animatie. Als u echter de eigenschap animatienaam je zou geen animatie hebben.

De eigenschap voor animatieduur

Deze eigenschap wordt gebruikt om te definiëren hoeveel tijd een geanimeerd element nodig heeft om van de ene toestand naar de andere over te gaan.

In het bovenstaande voorbeeld is de eigenschap animatieduur is ingesteld op 5 seconden (5s), dus de groene rechthoekige knop heeft in totaal 5 seconden voordat deze volledig een blauwe ronde knop wordt.

De eigenschap Animation-delay

Deze eigenschap is om één reden belangrijk; het kan een paar seconden duren voordat sommige webpagina's volledig zijn geladen (vanwege verschillende factoren). Dus de eigenschap animatie-vertraging voorkomt dat de animatie onmiddellijk start voor het geval het even duurt voordat de webpagina is geladen.

In het bovenstaande voorbeeld is de eigenschap animatie-vertraging is ingesteld op 4s, wat betekent dat de animatie pas 4 seconden nadat de webpagina is bezocht begint (waardoor de webpagina voldoende tijd heeft om te laden voordat de animatie begint).

De eigenschap Animation-iteratie-count

Deze eigenschap geeft aan hoe vaak het geanimeerde element van de ene staat naar de andere moet overgaan. De eigenschap animatie-iteratie-telling neemt waarden aan die woorden en getallen zijn. De getallenwaarde kan van alles zijn vanaf 1 en de woordwaarde is meestal eindeloos .

In het bovenstaande voorbeeld is de animatie-iteratie-tellingswaarde ingesteld op eindeloos , wat betekent dat zolang de webpagina in de lucht is, de eigenschap van de knop continu van de ene staat naar de andere zal bewegen.

De eigenschap Animation-timing-functie

Deze eigenschap bepaalt de beweging van het geanimeerde element terwijl het van de ene toestand naar de andere overgaat. De eigenschap animatie-timing-functie wordt meestal een van de drie gemakswaarden toegewezen.

Instapklaar
Uitrusten
Gemakkelijk in-uit

De gemak-in-uit waarde wordt hierboven gebruikt; hierdoor wordt de animatie langzaam overgezet van de ene toestand naar de andere. Als het doel is om een langzame overgang te maken wanneer de knop verandert van een groene rechthoek naar een blauwe cirkel, gebruik je de gemakswaarde . Als je alleen de langzame overgang in de tegenovergestelde richting wilt, zou je de gebruiken gemakswaarde .

Onze code verminderen

In de meeste gevallen wordt het verkorten van een programma gezien als een praktische benadering. Dit komt vooral omdat minder regels code de kans verkleinen dat fouten in uw programma's onopgemerkt blijven.

Bovenstaande code kan met vier regels worden verkleind. Dit kan worden bereikt door simpelweg de eigenschap animatie te gebruiken zonder elk van de subeigenschappen expliciet te identificeren.

De code voor het voorbeeld van de knopanimatie verminderen

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

				
				
				Categorie				 Programmeren