Piff opp nettstedet ditt ved å bruke disse animasjonstipsene og triksene.
Animasjoner og overganger er en viktig del av webdesign. Hvis du legger til subtile animasjoner på nettsiden din, blir den mer engasjerende. Enkle animasjoner som animerte ikoner, kinetisk typografi og animerte logoer kan bidra til å forbedre brukeropplevelsen. Lær fem fantastiske animasjonstriks som kan hjelpe deg med å livne opp nettstedet ditt.
1. Transformere et element ved sveving
En vanlig designpraksis er å ha et element som skaleres opp når det samhandles. For eksempel kan det være lurt å oversette knapper litt oppover når noen holder musen over den. Du kan oppnå dette ved å bruke CSS forvandle eiendom.
Forutsatt at du har en knapp:
<knapp>
Klikk på meg
knapp>
Du stilte brødteksten i dokumentet så vel som knappen:
/* Justerer knappen til midten av siden */
kropp {
vise: bøye seg;
høyde: 100vh;
align-elementer: senter;
rettferdiggjøre-innhold: senter;
bakgrunnsfarge: svart;
}/* Styler knappen */
;
knapp {
polstring: 1em 2em
bakgrunn: blå;
grense: 0;
farge: hvit;
grense-radius: 0.25rem;
markøren: pekeren;
skriftstørrelse: 2rem;
overgang: forvandle 500ms;
}
/* Hover states */
knapp:sveve,
knapp:fokus {
forvandle: oversettY(0.75rem) 500ms;
}
Med den siste blokken, setter du sveve- og fokustilstander på knappen. I begge tilstander oversetter du knappen langs Y-aksen med 0,75rem. Knappen vil se slik ut:
Når du holder musen over knappen, svirrer den i retning oppover. Overgangen tar et halvt sekund (500ms) å fullføre. Dette er et mønster du kan implementere ikke bare på knappene dine, men også på andre elementer (f.eks. bilder).
2. Erklære flere nøkkelrammer med én erklæring
Et annet vanlig mønster i CSS-animasjoner er å iterere over samme verdi flere ganger. Dette kan være en bestemt farge, størrelse eller orientering. Du kan oppnå dette ved å bruke CSS keyframe-animasjoner ved å deklarere flere nøkkelbilder med én erklæring.
Tenk på knappen du opprettet i forrige seksjon. Kanskje du vil iterere over flere bakgrunnsfarger når du klikker på knappen. Men du vil også gå over samme farge på forskjellige stadier av animasjonen. La oss se hvordan du oppnår det i kode.
Først vil du animere knappen bare når du klikker den. Så du vil lage en script.js fil, der du får tilgang til knappen og bytter en klasse på knappen når den klikkes:
konst knapp = dokument.querySelector("knapp")
button.addEventListener("klikk", (e) => {
button.classList.toggle('fest tid')
})
Vi brukte querySelector for å få tilgang til knappen fra nettsiden. For å lære mer om DOM-traversering, les innlegget vårt hvordan krysse DOM ved hjelp av JavaScript.
De fest tid klasse aktiverer en animasjon med tittelen parti:
.fest tid {
animasjon: parti 2000msuendelig;
}
For animasjonen ønsker du å starte med rødt og gå over til gult ved 25 %. Da vil du komme tilbake til rødt ved 50 % før du går tilbake til gult ved 75 %. Til slutt, ved 100 %, vil du nøye deg med en mørkeblå farge:
@keyframes parti {
0%, 50% {
bakgrunnsfarge: rød;
}
25%, 75% {
bakgrunnsfarge: gul;
}
100% {
bakgrunnsfarge: hsl(200, 72%, 35%);
}
}
Denne tilnærmingen er ganske nyttig for å veksle mellom farger på en fargebasert bakgrunn. Fordi du kan gjenta flere nøkkelbilder i én variabel, blir det superenkelt å bruke den samme egenskapen på forskjellige stadier av animasjonen.
3. Bruke @property til å animere egendefinerte egenskaper
Som du kanskje allerede vet, er ikke alle egenskaper i CSS animerbare. Den offisielle Mozilla dokumentasjon holder en oppdatert oversikt over alle animerbare CSS-egenskaper. Hvis du ønsker å animere en eiendom som ikke kan animeres, vil den beste løsningen være å bruke @eiendom direktiv.
Start med å endre bakgrunnsfargen på knappen til en lineær gradient:
knapp {
// annenCSS
bakgrunn: lineær gradient(90grader, blå, grønn);
// annenCSS
}
Her er utgangen:
Ofte ønsker du å animere fargegradienten på knappen. Selv om det er triks du kan bruke for å flytte gradienten rundt, kan du faktisk ikke animere den. Dette er fordi bakgrunn (i tillegg til bakgrunnsbilde) er ikke en animerbar egenskap. Dette er hvor @eiendom kommer inn.
De @eiendom direktiv lar deg registrere egendefinerte egenskaper. Når du bruker @eiendom, må du gi den tre verdier, nemlig syntaks, arver, og Opprinnelig verdi:
@eiendom --farge-1 {
syntaks: "<farge>";
arver: ekte;
Opprinnelig verdi: rød;
}
@eiendom --farge-2 {
syntaks: "<farge>";
arver: ekte;
Opprinnelig verdi: blå;
}
Den første er startegenskapen mens den andre er destinasjonsegenskapen. Nå, i stedet for å overføre et bakgrunnsbilde (som du ikke kan overføre), vil du gå over fra --farge-1 til --farge-2 (dine egendefinerte egenskaper) på ett sekund:
knapp {
overgang: --farge-1 1000ms, --farge-2 1000ms;
}
Denne teknikken er nyttig fordi du også kan legge til andre tilpasninger. For eksempel legger du til en forsinkelse for å gi det en jevnere opplevelse. Mulighetene er endeløse.
4. Bruke negative animasjonsforsinkelser
Animasjonsforsinkelser er avgjørende for å lage jevne animasjoner. La oss se et eksempel på det i aksjon. I denne delen legger du til en div element med 15 prikker på toppen av knappen:
<divklasse="prikker">
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
<divklasse="punktum">div>
div>
Her er noen grunnleggende styling for å forvandle hvert barn div til en prikk:
.prikker {
vise: bøye seg;
mellomrom: .5rem;
marg-bunn: 20px;
}
.punktum {
bredde: 10px;
størrelsesforholdet: 1;
bakgrunnsfarge: rød;
grense-radius: 50%;
}
Her bruker vi Flexbox for å plassere prikkene i en horisontal linje. For å dykke dypt inn i Flexbox, kan du sjekke vår CSS Flexbox-opplæring.
Innsiden script.js, legg til koden som utløser animasjonen av prikkene. Du bytter på danse klasse på prikkene:
button.addEventListener("klikk", (e) => {
button.classList.toggle('fest tid')
// Ny kode
dots.forEach((punktum) => {
dot.classList.toggle('danse')
})
})
Danseklassen aktiverer en animasjon med tittelen stige:
.punktum.danse {
animasjon: stige 2000msuendeligalternere;
}Når det gjelder animasjonen, oversett bare prikkene -100px langs Y-aksen:
@keyframes stige {
100% {
forvandle: oversettY(-100 piksler)
}
}Nå er det på tide å gjøre noe interessant. I stedet for at prikkene stiger samtidig, vil du animere prikkene til å flyte som en bølge. For å oppnå dette, må du legge til animasjonsforsinkelse til prikkene, og øk hver prikk med 100 ms:
.punktum:nth-child (1) {
animasjonsforsinkelse: 100ms;
}
.punktum:nth-child (2) {
animasjonsforsinkelse: 200ms;
}
.punktum:nth-child (3) {
animasjonsforsinkelse: 300ms;
}
.punktum:nth-child (4) {
animasjonsforsinkelse: 400ms;
}
/* Fortsett til du når den 15. prikken */
Dette skaper en elegant animasjon der prikkene beveger seg opp og ned i en bølget form. Følgende bilde fanger opp prikkene i midten av animasjonen:
Husk at dette kan være problematisk, noe som bringer oss til det femte tipset.
5. Bruk prefers-reduced-motion for å aktivere innstillinger
Husk alltid at mange mennesker ikke liker bevegelsesbaserte animasjoner. Faktisk har de fleste brukere preferanser i nettleseren som kan slå av bevegelsen. Bevegelse kan distrahere sansene, og i alvorlige tilfeller føre til kvalme.
Heldigvis kan du enkelt ta vare på dette ved å pakke inn animasjonen din i en ingen preferanse mediesøk slik:
@media(prefers-reduced-motion: no-preference) {
.punktum.danse {
animasjon: stige 2000msuendeligalternere;
}
}Nå hvis du skulle aktivere foretrekker-redusert-bevegelse i nettleseren din, vil ikke animasjonen kjøre.
Lær mer CSS-tips og triks
CSS er full av fantastiske hacks som går utover animasjoner og overganger. For eksempel er det tips og triks for å gjøre hele layouten din elegant og responsiv. Praksisen kan hjelpe deg med å gjøre nettstedet ditt mer engasjerende, tilgjengelig og behagelig å surfe på. Hvis du vil være en topp én prosent CSS-utvikler, hjelper det mye å ha et par triks i ermet.
