Îmbunătățiți-vă site-ul folosind aceste sfaturi și trucuri de animație.
Animațiile și tranzițiile sunt o parte importantă a designului web. Adăugarea de animații subtile la pagina dvs. web o va face mai captivantă. Animațiile simple, cum ar fi pictogramele animate, tipografia cinetică și siglele animate pot ajuta la îmbunătățirea experienței utilizatorului. Aflați cinci trucuri minunate de animație care vă pot ajuta să vă animați site-ul.
1. Transformarea unui element la hover
O practică obișnuită de proiectare este de a avea un element care se extinde atunci când interacționează. De exemplu, ați putea dori să traduceți butoanele puțin în sus atunci când cineva trece mouse-ul pe el. Puteți realiza acest lucru folosind CSS transforma proprietate.
Presupunând că aveți un buton:
<buton>
Click pe mine
buton>
Ați stilat corpul documentului, precum și butonul:
/* Aliniază butonul la centrul paginii */
corp {
afişa: contracta;
înălţime: 100vh;
alinierea elementelor: centru;
justifica-conținut: centru;
culoare de fundal: negru;
}/* Stilează butonul */
buton {
căptușeală: 1ei 2ei;
fundal: albastru;
frontieră: 0;
culoare: alb;
hotar-raza: 0.25rem;
cursor: indicator;
marimea fontului: 2rem;
tranziție: transforma 500Domnișoară;
}
/* Stare de trecere cu mouse-ul */
buton:planare,
buton:concentrare {
transforma: traduceY(0.75rem) 500Domnișoară;
}
Cu ultimul bloc, setați stările de hover și focalizați pe buton. În ambele stări, translați butonul de-a lungul axei Y cu 0,75 rem. Butonul ar arăta astfel:
Când treceți cu mouse-ul pe buton, acesta se deplasează în sus. Tranziția durează o jumătate de secundă (500 ms) pentru a se finaliza. Acesta este un model pe care îl puteți implementa nu doar pe butoanele dvs., ci și pe alte elemente (de exemplu, imagini).
2. Declararea mai multor cadre cheie cu o singură declarație
Un alt model comun în animațiile CSS este repetarea aceleiași valori de mai multe ori. Aceasta poate fi o anumită culoare, dimensiune sau orientare. Puteți realiza acest lucru utilizând Animații cu cadre cheie CSS prin declararea mai multor cadre cheie cu o singură declarație.
Luați în considerare butonul pe care l-ați creat în secțiunea anterioară. Poate doriți să repetați mai multe culori de fundal când faceți clic pe butonul. Dar, de asemenea, doriți să treceți peste aceeași culoare în diferite etape ale animației. Să vedem cum să realizăm asta în cod.
În primul rând, doriți să animați butonul numai când faceți clic. Deci ai crea un script.js fișier, în interiorul căruia accesați butonul și comutați o clasă pe buton atunci când faceți clic pe acesta:
const butonul = document.querySelector("buton")
button.addEventListener("clic", (e) => {
button.classList.toggle('timpul petrecerii')
})
Am folosit querySelector pentru a accesa butonul de pe pagina web. Pentru a afla mai multe despre traversarea DOM, citiți postarea noastră pe cum să traversați DOM folosind JavaScript.
The timpul petrecerii clasa activează o animație intitulată parte:
.timpul petrecerii {
animaţie: parte 2000Domnișoarăinfinit;
}
Pentru animație, doriți să începeți cu roșu și să treceți la galben la 25%. Apoi veți reveni la roșu la 50% înainte de a reveni la galben la 75%. În cele din urmă, la 100%, te-ai mulțumi cu o culoare albastru închis:
@keyframes petrecere {
0%, 50% {
culoare de fundal: roșu;
}
25%, 75% {
culoare de fundal: galben;
}
100% {
culoare de fundal: hsl(200, 72%, 35%);
}
}
Această abordare este destul de utilă pentru alternarea culorilor pe un fundal bazat pe culori. Deoarece puteți repeta mai multe cadre cheie într-o singură variabilă, devine foarte ușor să utilizați aceeași proprietate în diferite etape ale animației.
3. Folosind @property pentru a anima proprietăți personalizate
După cum probabil știți deja, nu toate proprietățile din CSS sunt animabile. Oficialul Documentația Mozilla păstrează o înregistrare actualizată a tuturor proprietăților CSS animabile. Dacă doriți să animați o proprietate care nu poate fi animată, atunci cea mai bună soluție ar fi să utilizați @proprietate directivă.
Începeți prin a schimba culoarea de fundal a butonului într-un gradient liniar:
buton {
// alteCSS
fundal: liniar-gradient(90deg, albastru, verde);
// alteCSS
}
Iată rezultatul:
Adesea, ați dori să animați gradientul de culoare pe buton. Deși există trucuri pe care le puteți folosi pentru a vă muta gradientul, de fapt nu îl puteți anima. Asta pentru ca fundal (precum și imagine de fundal) nu este o proprietate animabilă. Aici e locul @proprietate intră.
The @proprietate directiva vă permite să înregistrați proprietăți personalizate. Când utilizați @proprietate, trebuie să îi oferiți trei valori și anume sintaxă, moștenește, și valoarea initiala:
@proprietate --culoare-1 {
sintaxă: "<culoare>";
moștenește: Adevărat;
valoarea initiala: roșu;
}
@proprietate --culoare-2 {
sintaxă: "<culoare>";
moștenește: Adevărat;
valoarea initiala: albastru;
}
Prima este proprietatea de pornire, în timp ce a doua este proprietatea de destinație. Acum, în loc să faci tranziția unei imagini de fundal (de la care nu poți face tranziția), ai face tranziția --culoarea-1 la --culoarea-2 (proprietățile dvs. personalizate) într-o secundă:
buton {
tranziție: --culoarea-1 1000Domnișoară, --culoarea-2 1000Domnișoară;
}
Această tehnică este utilă deoarece puteți adăuga și alte personalizări. De exemplu, adăugați o întârziere pentru a oferi o experiență mai lină. Posibilitățile sunt nesfârșite.
4. Utilizarea întârzierilor negative ale animației
Întârzierile animației sunt esențiale pentru crearea animațiilor fluide. Să vedem un exemplu în acțiune. În această parte, adăugați a div element cu 15 puncte deasupra butonului:
<divclasă="puncte">
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
<divclasă="punct">div>
div>
Iată câteva stiluri de bază pentru a transforma fiecare copil div într-un punct:
.puncte {
afişa: contracta;
decalaj: .5rem;
margine-fond: 20px;
}
.punct {
lăţime: 10px;
raportul de aspect: 1;
culoare de fundal: roșu;
hotar-raza: 50%;
}
Aici folosim Flexbox pentru a plasa punctele într-o linie orizontală. Pentru a vă scufunda adânc în Flexbox, ne puteți consulta Tutorial CSS Flexbox.
Interior script.js, adăugați codul care declanșează animația punctelor. Comutați pe dans clasa pe puncte:
button.addEventListener("clic", (e) => {
button.classList.toggle('timpul petrecerii')
// Cod nou
dots.forEach((punct) => {
dot.classList.toggle('dans')
})
})
Cursul de dans activează o animație intitulată creştere:
.punct.dans {
animaţie: creştere 2000Domnișoarăinfinitalterna;
}În ceea ce privește animația, pur și simplu traduceți punctele -100px de-a lungul axei Y:
@keyframes ridica {
100% {
transforma: traduceY(-100px)
}
}Acum este timpul să facem ceva interesant. În loc ca punctele să se ridice în același timp, doriți să animați punctele să curgă ca un val. Pentru a realiza acest lucru, trebuie să adăugați animație-întârziere la puncte și crește fiecare punct cu 100 ms:
.punct: al-lea copil (1) {
animație-întârziere: 100Domnișoară;
}
.punct: al-lea copil (2) {
animație-întârziere: 200Domnișoară;
}
.punct: al-lea copil (3) {
animație-întârziere: 300Domnișoară;
}
.punct: al-lea copil (4) {
animație-întârziere: 400Domnișoară;
}
/* Continuă până când ajungi la al 15-lea punct */
Acest lucru creează o animație elegantă în care punctele se mișcă în sus și în jos într-o formă ondulată. Următoarea imagine surprinde punctele din mijlocul animației:
Rețineți că acest lucru poate fi problematic, ceea ce ne duce la al cincilea sfat.
5. Utilizați prefers-reduced-motion pentru a activa Preferințe
Rețineți întotdeauna că multor oameni nu le plac animațiile bazate pe mișcare. De fapt, majoritatea utilizatorilor au preferințe în browser care pot opri mișcarea. Mișcarea poate distrage atenția simțurilor și, în cazuri severe, poate duce la greață.
Din fericire, vă puteți ocupa cu ușurință de acest lucru, împachetând animația în interiorul unui nici o preferință interogare media astfel:
@mass-media(preferă-reducere-mișcare: fără preferințe) {
.punct.dans {
animaţie: creştere 2000Domnișoarăinfinitalterna;
}
}Acum, dacă ar fi să activați preferă-mişcare-redusă în browserul dvs., atunci animația nu va rula.
Aflați mai multe sfaturi și trucuri CSS
CSS este plin de hack-uri minunate care merg dincolo de animații și tranziții. De exemplu, există sfaturi și trucuri pentru a vă face întregul aspect elegant și receptiv. Practicile vă pot ajuta să vă faceți site-ul web mai captivant, mai accesibil și mai plăcut de navigat. Dacă vrei să fii un dezvoltator CSS de top 1%, atunci ai câteva trucuri în mânecă te ajută foarte mult.