Home-theater-designers
CSS gir utviklere muligheten til å levendegjøre websidene sine ved hjelp av nøkkelrammer -animasjon.
CSS -animasjon oppnås ved å endre starttilstanden til et HTML -element gjennom de forskjellige egenskapene. Noen generelle CSS -egenskaper som kan animeres inkluderer:
hvordan du får flere belønninger fra Google opinion
- Bredde
- Høyde
- Posisjon
- Farge
- Ugjennomsiktighet
Disse generelle CSS -egenskapene manipuleres av spesifikke CSS -elementer for å skape ønsket resultat. Hvis du noen gang har støtt på et animert element på en webside, er sjansen stor for at elementet ble animert ved hjelp av tastaturrammer.
Hva er et nøkkelrammeelement?
De nøkkelbilder element kan brukes på ett eller flere HTML -elementer som den har tilgang til. Den identifiserer et bestemt punkt i tilstanden til et element og dikterer utseendet dette elementet må ha på dette tidspunktet.
Dette kan høres ut som mye å fordøye, men det er faktisk ganske enkelt. De nøkkelbilder element har en ganske enkel struktur som lett kan forstås og justeres for å passe alle animasjonskrav.
Nøkkelrammer Struktureksempel
@keyframes identifier {
from{
/* where you would like the animation to start from. */
}
to{
/* where you would like the animation to end up */
}
}La oss si at du vil animere en grønn rektangulær knapp ved å gjøre den til en blå rund knapp.
Innenfor parametrene til fra seksjonen ovenfor må du plassere all styling som er nødvendig for at elementet skal se ut som en grønn rektangulær knapp, så i til delen, vil du sette alle stylingkravene for å forvandle denne knappen til en blå rund knapp.
Hvis du tenker, høres det ikke så mye ut som animasjon. Vel, det er fordi en nøkkelkomponent i hele denne prosessen ennå ikke er introdusert --- denne komponenten er animasjonseiendommen.
Animasjonseiendommen
De animasjonseiendom har et sett med forskjellige underegenskaper; disse brukes i kombinasjon med nøkkelrammestrukturen ovenfor for å animere det ønskede HTML -elementet.
Du trenger imidlertid bare å kjenne fem av disse underegenskapene og verdiene som er knyttet til dem, for å oppnå animasjon i prosjektene dine. Disse egenskapene er kjent som:
- Animasjonsnavn
- Animasjon-varighet
- Animasjon-timing-funksjon
- Animasjonsforsinkelse
- Animasjon-iterasjon-telling
Bruke animasjon på en webside
Ved å bruke scenariet ovenfor er målet å lage en animert knapp.
Knapp Animasjon 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!
Animasjonsdelen av koden ovenfor inneholder de fem underegenskapene som ble nevnt tidligere. Hver eiendom har en veldig distinkt funksjon, og sammen jobber de med å animere et HTML -element som de er laget for å målrette mot.
Relatert: Slik målretter du mot en del av en webside ved hjelp av CSS -velgere
Animasjon-navnegenskapen
Denne eiendommen er den viktigste eiendommen på listen. Uten animasjon-navnegenskap , ville du ikke ha noen identifikator for å gå til nøkkelbilder element , noe som gjør all koden innenfor parameterne ubrukelig.
Hvis du har glemt å inkludere en eller to av de andre underegenskapene, kan du fortsatt ha en ganske anstendig animasjon. Imidlertid, hvis du har glemt animasjon-navnegenskap du ville ikke ha noen animasjon.
Egenskapen for animasjonstid
Denne egenskapen brukes til å definere hvor lang tid et animert element skal ta når den overgår fra en tilstand til den neste.
I eksemplet ovenfor er animasjon-varighet eiendom er satt til 5 sekunder (5s), så den grønne rektangulære knappen vil ha totalt 5 sekunder før den blir en blå rund knapp.
Animasjonsforsinkelsesegenskapen
Denne egenskapen er viktig på grunn av en grunn; Det kan ta noen sekunder å laste noen nettsider helt (på grunn av flere forskjellige faktorer). Så animasjon-forsinkelse eiendom forhindrer animasjonen i å starte umiddelbart hvis nettstedet tar litt tid å laste inn.
I eksemplet ovenfor er animasjon-forsinkelse eiendom er satt til 4s, noe som betyr at animasjonen ikke begynner før 4 sekunder etter at websiden er besøkt (gir nettsiden nok tid til å laste inn før animasjonen begynner).
Egenskapen Animasjon-iterasjonstelling
Denne egenskapen angir hvor mange ganger det animerte elementet skal overgå fra en tilstand til den neste. De animasjon-iterasjonstelling tar verdier som er ord og tall. Tallverdien kan være alt fra 1 og oppover, mens ordet verdi vanligvis er uendelig .
I eksemplet ovenfor er animasjon-iterasjon-telleverdi er satt til uendelig , noe som betyr at så lenge nettsiden er oppe, vil knappegenskapen animere fra en tilstand til den neste, kontinuerlig.
Egenskapen Animasjon-timing-funksjon
Denne egenskapen dikterer bevegelsen til det animerte elementet når det overgår fra en tilstand til den neste. De animasjon-timing-funksjon-egenskap er vanligvis tildelt en av tre brukervennlighetsverdier.
- Lett inn
- Lett ut
- Lett-inn-ut
De verdi for enkel inn-ut brukes ovenfor; dette overfører langsomt animasjonen fra den ene staten til den andre. Hvis målet er å skape en langsom overgang når knappen omdannes fra et grønt rektangel til en blå sirkel, vil du bruke enkel verdi . Hvis du bare ville ha den langsomme overgangen i motsatt retning, ville du bruke enkelhetsverdi .
Redusere vår kodeks
I de fleste tilfeller blir reduksjon av lengden på et program sett på som en praktisk tilnærming. Dette er hovedsakelig fordi færre kodelinjer reduserer sannsynligheten for at feil går upåaktet hen i programmene dine.
Koden ovenfor kan reduseres med fire linjer. Dette kan oppnås ved ganske enkelt å bruke animasjonseiendommen uten å eksplisitt identifisere hver av dens underegenskaper.
Redusere koden for knappeanimasjonseksemplet
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;
}
}