CSS este unul dintre cele mai puternice moduri de a face pagina web interactivă. Transformă aspectul și simțurile elementelor noastre de bază pagină web. Una dintre caracteristicile importante și interesante pe care le oferă CSS este că ne permite să realizăm animații. Ne permite să mutăm elementele în pagina noastră. Să începem Journey of Animations în CSS în următoarea ordine:
Animații în CSS
Adăugarea de animații pe site-ul nostru web este o modalitate excelentă de a atrage atenția utilizatorilor. Nu numai că adaugă valoare paginii noastre, ci și îmbogățește experiența utilizatorului. Animația în CSS este construită pe două părți. Sunt
- Cadre cheie
- Animaţie
Animațiile CSS sunt acceptate în toate browserele. Cu toate acestea, unele browsere mai vechi precum Safari (până la versiunea 8.0) necesită prefix (-webkit-) pentru a interpreta proprietățile animației. De exemplu:
.anim {înălțime: 200px lățime: 200px fundal: albastru deschis poziție: raza relativă a chenarului: 100% -webkit-animation-name: cssanim / * browsere vechi * / -webkit-animation-duration: 5s / * browsere vechi * / animație -name: animație cssanim-durata: 5s} / * browsere vechi * / @ -webkit-keyframes cssanim {0% {left: 0px} 100% {left: 300px}} @keyframes cssanim {0% {left: 0px} 100 % {left: 300px}}Putem folosi exemplul de pagină html de mai sus și putem înlocui codul CSS din eticheta de stil pentru a încerca exemple suplimentare.
Cadre cheie în CSS
Acesta este elementul de bază al animațiilor din CSS. Obișnuia să definească momentele și stilurile specifice animației de pe pagina noastră web. Cu alte cuvinte, atunci când specificăm @keyframes din CSS-ul nostru, acesta primește controlul pentru a modifica starea curentă într-o stare nouă sau pentru a anima obiectele pentru o anumită durată.
@Keyframes trebuie să aibă anumite proprietăți pentru a controla animația, cum ar fi numele animației, etapele și proprietățile.
sare vs bucătar vs marionetă
Nume - Fiecare animație trebuie să aibă un nume pentru a-și descrie comportamentele.
Etape - Etapa reprezintă finalizarea unei animații. Se poate face notat fie cu cuvântul cheie „către” și „de la”, fie ca procent, în timp ce 0% reprezintă starea de început și 100% reprezintă starea finală a unei animații. Avantajul utilizării reprezentării procentuale este că putem defini mai multe etape intermediare, adică care ar trebui să fie comportamentul animației la 50% sau 75% etc.
Proprietăți - Aceste proprietăți ne oferă control asupra @keyframes pentru a le manipula în timpul animației.
.anim {înălțime: 200px lățime: 200px fundal: poziție albastru deschis: raza relativă a chenarului: 100% nume-animație: cssanim animație-durată: 5s} @keyframes cssanim {0% {transform: scale (0.5) opacitate: 0} 50 % {transform: scale (1.5) opacity: 1} 100% {transform: scale (1)}}Acum, deoarece suntem clari cu privire la definirea cadrelor cheie. Să explorăm proprietățile animației, pentru a descrie cum să ne animăm elementele și obiectele. Cele două proprietăți, adică mostenire și inițială, pot fi utilizate cu toate tipurile de animație. Aceste proprietăți sunt utilizate în general împreună cu eticheta div pentru a prezenta comportamente diferite.
iniţială: Setează această proprietate la valoarea implicită.
moşteni: Moștenește această proprietate de elementul său părinte.
Proprietăți de animație
- nume-animație
Specifică numele animației, care este utilizată în @keyframes pentru manipulare.Valorile posibile sunt:
- Nume: Aceasta specifică numele de legat la cadrul cheie pentru animație.
- nici unul: Aceasta este valoarea implicită și poate fi utilizată pentru a suprascrie animațiile moștenite sau în cascadă.
Sintaxă:
animatie-nume: nume | nici unul | inițială | moşteni
.anim {înălțime: 200px lățime: 200px fundal: albastru deschis poziție: raza relativă a chenarului: 100% nume-animație: cssanim animație-durată: 5s} @keyframes cssanim {0% {left: 0px} 100% {left: 300px} }- animație-durată
Specifică timpul necesar unei animații pentru a finaliza o execuție. Este definit în secunde sau milisecunde (de exemplu, 4s sau 400ms). Valoarea implicită a acestei proprietăți este 0s, deci dacă această proprietate nu este specificată, atunci animația nu va avea loc.
Sintaxă:
animație-durată: timp
.anim {înălțime: 200px lățime: 200px fundal: albastru poziție: frontieră-rază relativă: 100% nume-animație: cssanim animație-durată: 4s} @keyframes cssanim {0% {transform: scale (0.4) opacitate: 0} 50 % {transform: scale (1.4) opacity: 1} 100% {transform: scale (1)}}- animatie-intarziere
Proprietatea animație-întârziere ne permite să specificăm întârzierea în animație. Acesta definește momentul în care o secvență de animație va începe executarea.
Valoarea acestei proprietăți poate fi declarată fie în secunde, fie în milisecunde (ms). Poate deține atât valori pozitive, cât și negative. O valoare pozitivă indică faptul că animația va începe după trecerea timpului specificat și până atunci va rămâne unanimă. Pe de altă parte, o valoare negativă va porni imediat animația din punctul ca și cum s-ar fi executat deja pentru un interval de timp specificat.
Sintaxă:
animatie-intarziere: ora
.anim {înălțime: 200px lățime: 200px fundal: albastru deschis poziție: raza relativă a chenarului: 100% nume-animație: cssanim animație-durată: 4s animație-întârziere: 4s} @keyframes cssanim {0% {left: 0px} 100% {stânga: 250px}}- animație-iterație-număr
Această proprietate indică de câte ori ar trebui redată o secvență de animație. Valoarea implicită a acestei proprietăți este 1.Valorile posibile sunt:
- număr - denotă numărul de iterații
- infinit - indică faptul că animația ar trebui să se repete pentru totdeauna
Sintaxă:
animație-iterație-număr: număr | infinit
.anim {înălțime: 200px lățime: 200px fundal: albastru deschis poziție: raza relativă a chenarului: 100% nume-animație: cssanim animație-durată: 2s animație-iterație-număr: 4} @keyframes cssanim {0% {left: 0px} 100% {left: 100px}}- animație-regie
Acesta definește direcția animației. Direcția elementului poate fi setată pentru a juca înainte, înapoi sau în cicluri alternative.Valoarea implicită a acestei proprietăți este normală și se resetează la fiecare ciclu.Valorile posibile sunt:
normal - Acesta este comportamentul implicit, iar animația este redată înainte. După fiecare ciclu animația ajunge la starea inițială și este redată din nou înainte
verso - Animația este redată în sens invers. După fiecare ciclu animația ajunge la starea sa finală și este redată înapoi
alterna - Direcția animației este inversată, adică joacă înainte înainte și apoi înapoi la fiecare ciclu. Fiecare ciclu ciudat redă animația înainte și fiecare ciclu pare redă mișcarea înapoi.
alternativ-invers - Direcția animației este inversată alternativ. Aici animația este redată mai întâi înapoi și apoi înainte în fiecare ciclu. Fiecare ciclu ciudat se mișcă invers sau înapoi și fiecare ciclu par redă animație înainte.
Sintaxă:
animație-direcție: normal | invers |alternativ | alternativ-invers
.anim {înălțime: 200px lățime: 200px fundal: albastru deschis poziție: raza relativă a chenarului: 100% nume-animație: cssanim animație-durată: 2s animație-iterație-număr: infinit} @keyframes cssanim {0% {left: 0px} 100% {left: 100px}}- funcția de sincronizare-animație
Această proprietate determină curba de viteză sau stilul de mișcare al animației. Este atribuit să facă schimbarea stilului de animație fără probleme de la o formă la alta. Dacă nu este atribuită nicio valoare, valoarea implicită este ușurată.Valorile posibile pentru funcția de temporizare-animație sunt:
uşura - Aceasta este valoarea implicită a proprietății. Aici animația începe lent, devine treptat rapid în mijloc și apoi din nou se termină încet.
liniar - Animația menține aceeași viteză pe tot parcursul ciclului, adică de la început până la sfârșit.
ușurință - Animația începe încet.
relaxare - Animația se termină încet.
program listă legată în c
ușurință-în-ieșire - Animația se mișcă încet atât la început, cât și la sfârșit.
cubic-bezier (n, n, n, n) - Această caracteristică avansată ne permite să creăm o funcție de sincronizare personalizată, definindu-ne propriile valori. Valoarea posibilă variază de la 0 la 1.
Sintaxă:
funcție-timp-animație: liniar | usurinta | ușurință | ușurință | ușurință-în-ieșire |cubic-bezier (n, n, n, n)
.anim {înălțime: 200px lățime: 200px fundal: albastru deschis poziție: raza relativă a chenarului: 100% nume-animație: cssanim animație-durată: 2s animație-direcție: invers} @keyframes cssanim {0% {fundal: portocaliu stânga: 0px } 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}- mod de animație-umplere
Aceasta este o proprietate specială, deoarece determină stilul animației înainte sau după redarea animației.Ca în mod implicit, stilul elementului nu este afectat de animație înainte de început sau după ce se termină. Această proprietate este utilă, deoarece ajută la suprascrierea acestui comportament implicit al animației.Următoarele sunt valori posibile pentru proprietatea de mod animație-umplere:
nici unul - Aceasta este valoarea implicită a proprietății, adică stilurile de animație nu sunt aplicate elementului, înainte sau după animație.
înainte - Stilele sunt reținute de elementul din secvența finală de animație, adică după finalizarea animației.
înapoi - Stilurile sunt păstrate de elementul din secvența de animație inițială, adică înainte ca animația să fie privită în special în timpul întârzierii animației.
ambii - Acest lucru înseamnă că animația va urma atât în direcția, adică înainte, cât și înapoi
Sintaxă:
animație-umplere-mod: niciunul | inainte | înapoi | ambii
.anim {lățime: 50px înălțime: 50px fundal: albastru deschis: alb font-greutate: poziție aldină: relativă animație-nume: cssanim animație-durată: 5s animație-iterație-număr: bordură infinită-rază: 100%} # anim1 { funcție-temporizare-animație: ușurință} # anim2 {funcție-temporizare-animație: liniară} # anim3 {funcție-temporizare-animație: ușurință-în} # anim4 {funcție-temporizare-animație: ușurință-ieșire} # anim5 {animație- funcție de sincronizare: ușurință-ieșire} @keyframes cssanim {de la {left: 0px} la {left: 400px}}- animație-joc-stare
Această proprietate specifică o animație care să fie în stare de redare sau întreruptă. De asemenea, când o animație este reluată din pauză, aceasta începe de unde a plecat.Valorile posibile sunt:
- joc - Pentru a reda animația în cursă
- întrerupt - Pentru a reda animația în stare de pauză.
Sintaxă:
animație-redare-stare: întrerupt | joc
.anim {width: 100px height: 100px background: lightblue position: relative animation-name: cssanim animation-duration: 3s animation-delay: 2s animation-fill-mode: backwards border-radius: 100%} @keyframes cssanim {0% {top: 0px background-color: orange} 50% {top: 0px background-color: green} 100% {top: 100pxbackground-color: blue}}- animaţie
Aceasta este cunoscută sub numele de proprietate de scurtare a animației. Este folosit pentru cod mai curat. Odată ce ne-am obișnuit cu toate proprietățile animației, se recomandă să folosim stenograma animației pentru codarea mai rapidă și definirea tuturor proprietăților într-o singură linie.
Sintaxă:
cum se convertește zecimalul în binar în python
animație: [nume-animație] | [animație-durată] | [funcție-temporizare-animație] |[animație-întârziere] | [animație-iterație-număr] | [animație-regie] |[animație-umplere-mod] | [animație-redare-stare]
Toate efectele de animație pe care le arătăm mai sus folosind diferite proprietăți de animație pot fi obținute utilizând stenogramaanimaţie proprietate.
.anim {înălțime: 200px lățime: 200px fundal: albastru deschis poziție: raza relativă a chenarului: 100% nume-animație: cssanim animație-durată: 2s animație-direcție: animație normală-stare-redare: întrerupt} @keyframes cssanim {0% {background: orange top: 0px} 50% {background: yellow left: 200px top: 200px} 100% {background: blue left: 100px}}Aceasta încheie toate proprietățile animației care pot fi utilizate în CSS. Ar trebui să încercăm diferite variante ale acestor proprietăți pentru a obține o imagine mai clară. Când ne simțim confortabili, proprietatea de scurtare a animației poate fi de mare ajutor pentru a scrie un cod mai curat și mai rapid. Aceasta este una dintre abilitățile importante de învățat în CSS pentru dezvoltatorii web. Deoarece avem tendința să ne concentrăm mai mult pe obiecte în mișcare decât pe obiecte statice, animațiile ne pot ajuta să realizăm acest lucru și, de asemenea, să dezvoltăm pagini web remarcabile.
Verificați-ne care vine cu instruire live condusă de instructor și experiență în viața reală a proiectului. Această instruire vă face să aveți abilități de a lucra cu tehnologii web back-end și front-end. Include cursuri de dezvoltare web, jQuery, Angular, NodeJS, ExpressJS și MongoDB.
Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a blogului „Animații în CSS” și vă vom răspunde.