Cum să utilizați tranzițiile și transformările CSS3 pentru a crea animații

Animații interesante pot fi create cu CSS3 folosind transformări și tranziții. Transformările sunt folosite pentru a face schimbarea unui element de la o stare la alta. Exemple ar fi elementele de rotație, mișcare, deformare și scalare. Fără o tranziție, un element în curs de transformare s-ar schimba brusc de la o stare la alta. Pentru a preveni acest lucru, poate fi adăugată o tranziție, astfel încât să puteți controla modificarea, făcând-o să arate mai lină.

Cum se utilizează transformările CSS3

Există câteva tipuri de transformări utilizate în mod obișnuit. Ne vom concentra pe exemple 2D pentru acest tutorial, dar este bine să știm că lucruri interesante se pot face și cu transformările 3D. (Odată ce ați stăpânit 2D, 3D va fi mult mai ușor!)

În următoarele exemple, dreptunghiurile originale sunt într-un verde mai închis, iar cele transformate sunt puțin mai transparente.

Traduceți

Metoda translate() mută un element din poziția curentă într-una nouă.
Cu acest cod, dreptunghiul ajustat este mutat cu 40 de pixeli la dreapta și cu 100 de pixeli în jos față de poziția curentă.

 -ms-transform: translate(40px, 100px); /* IE 9 */
    -webkit-transform: translate(40px, 100px); /* Safari */
    transform: translate(40px, 100px);

Roti

Metoda rotate() rotește un element în sensul acelor de ceasornic sau în sens invers acelor de ceasornic cu valoarea de grad specificată. Acest cod rotește dreptunghiul în sensul acelor de ceasornic cu 40 de grade.

-ms-transform: rotate(40deg); /* IE 9 */
    -webkit-transform: rotate(40deg); /* Safari */
    transform: rotate(40deg);

Scară

Metoda scale() mărește sau micșorează dimensiunea unui element (în funcție de parametrii dați pentru lățime și înălțime). În acest exemplu, dreptunghiul ajustat este de două ori mai mare decât lățimea inițială și de trei ori mai mare decât înălțimea inițială.

 -ms-transform: scale(2, 3); /* IE 9 */
    -webkit-transform: scale(2, 3); /* Safari */
    transform: scale(2, 3);

SkewX

Cu skewX() , doar axa x va fi afectată. Acest dreptunghi este înclinat cu 30 de grade de-a lungul axei x:

  -ms-transform: skewX(30deg); /* IE 9 */
    -webkit-transform: skewX(30deg); /* Safari */
    transform: skewX(30deg);

SkewY

Aceasta este aceeași idee, dar pe axa y. Metoda skewY() un element de-a lungul axei y cu unghiul definit. Acest dreptunghi este înclinat cu 30 de grade de-a lungul axei y.

-ms-transform: skewY(30deg); /* IE 9 */
    -webkit-transform: skewY(30deg); /* Safari */
    transform: skewY(30deg);
}

Oblic

Dacă doriți să înclinați atât axa x, cât și axa y, acest lucru se poate face într-un singur loc. Metoda skew() obligă un element de-a lungul axei x și y folosind unghiurile specificate. Următorul exemplu obligă elementul dreptunghi cu 30 de grade de-a lungul axei x și 20 de grade de-a lungul axei x.

-ms-transform: skew(30deg, 20deg); /* IE 9 */
    -webkit-transform: skew(30deg, 20deg); /* Safari */
    transform: skew(30deg, 20deg);

Matrice

Aici lucrurile devin interesante, dar și mai eficiente în situația potrivită. Dacă faceți o mulțime de transformări și nu doriți să le scrieți pe toate individual, aceste transformări 2D pot fi combinate cu metoda matrix() .

Iată o schiță de bază de urmat:

matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Doar o atenție, este nevoie de câteva cercetări pentru a găsi valorile din matrice. Iată un ghid util pentru a începe.

Pentru a face acest exemplu, iată valorile matricei:

  -ms-transform: matrix(2, -0.3, 0, 1, 0, 0); /* IE 9 */
    -webkit-transform: matrix(2, -0.3, 0, 1, 0, 0); /* Safari */
    transform: matrix(2, -0.3, 0, 1, 0, 0);

Cum se utilizează tranzițiile CSS3

Acum că transformările au fost acoperite, este important să rețineți că acestea sunt utilizate frecvent cu tranziții. Acest lucru va avea mai mult sens în următoarele exemple de design.

Este bine să rețineți că valorile pot fi personalizate pentru a face tranziția între două stări ale unui element exact așa cum ați dori. Gândiți-vă la asta ca la o modalitate de a controla viteza animației atunci când schimbați proprietățile CSS. Un exemplu pe care probabil l-ați întâlnit este dacă treceți cu mouse-ul peste un buton. Este obișnuit să vezi o „întunecare lentă” mai degrabă decât o culoare mai închisă instantanee atunci când treci cu mouse-ul peste ea. Această „întunecare lentă” a fost creată cu o tranziție.

Dacă specificați o mulțime de valori, scurtarea va fi utilă. Proprietatea CSS de transition este o proprietate scurtă pentru transition-property transition-duration transition-timing-function transition-delay .

Detalii de tranziție

Proprietatea transition-property CSS în care va fi aplicată tranziția, deoarece puteți aplica o tranziție la o proprietate individuală. Exemple de aplicare a unei tranziții la o proprietate individuală ar fi pe un fundal sau o transformare. Dacă doriți să vizați toate proprietățile de pe site, proprietatea de transformare poate fi setată la all .

Durata transition-duration este utilă pentru ca modificările unei proprietăți să aibă loc într-un anumit timp, mai degrabă decât imediat. Veți vedea secunde și milisecunde ca valori posibile.

transition-duration: 7s;
transition-duration: 120ms;
transition-duration: 2s, 3s;
transition-duration: 10s, 30s, 230ms;

Proprietatea CSS a transition-timing-function vă permite să stabiliți o curbă de accelerație, astfel încât viteza tranziției să poată varia pe durata acesteia. Există multe opțiuni pentru a experimenta.

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|step-start|step-end|steps(int,start|end)|cubic-bezier(n,n,n,n)|initial|inherit;

transition-delay este destul de explicită. O valoare specificată setează numărul de secunde sau milisecunde de așteptat înainte ca efectul de tranziție să înceapă. Initial va seta proprietatea la valoarea implicită. Dacă este specificat inherit , aceasta înseamnă că moștenește proprietatea din elementul părinte.

Here are all the properties:
transition-property: background; //all
  transition-duration: 1s;
  transition-timing-function: linear; //other options are ease
  transition-delay: 0.5s;

Iată configurația de bază pentru o tranziție:

div {
  transition: [property] [duration] [timing-function] [delay];
}

Secvența completă de scurtătură:

div {
  transition: background 1s linear 0.5s;
}

Planificarea animației

Înainte de a crea animații cu adevărat detaliate, este bine să faci un pas înapoi înainte de a crea ceva total nebunesc (mai ales dacă va fi în public pe web). Nu este nimic în neregulă în a adăuga un fler distractiv, dar este tentant să exagerezi. Mișcarea pe care o creați ar trebui să transmită sens și să îmbunătățească experiența utilizatorului, nu să distrage atenția de la ea. Acestea fiind spuse, este timpul să începem să creați!

Vreau să spun că există gif-uri animate în acest tutorial pentru a afișa animațiile. Gif-urile sunt repetate, ceea ce de obicei nu se face pentru modele. Scopul de a le repeta este doar în scop demonstrativ.

Mutarea unei imagini cu proprietatea de transformare CSS

Înainte de a intra în transformări și tranziții complicate, să vorbim despre coordonatele unei grile de axe. (Atenție: Acest lucru poate aduce înapoi amintiri de hârtie milimetrică de la cursurile de matematică.) Coordonatele sunt folosite pentru a muta imaginea.

coordonatele X și y

Lucrurile vor arăta puțin diferit față de ceea ce vă puteți aștepta. Valoarea -y este deasupra axei x. HTML și CSS folosesc ceea ce se numește „sistem de coordonate carteziene inversate”, deoarece paginile web încep din stânga sus și citesc în jos.

Animație unu: Transformare de bază cu mișcare orizontală

Am atins pe scurt baza pe translate() și cum poate muta un element. Când este pus în practică, vă poate pluti cu adevărat barca, la propriu. După cum am învățat mai sus, metoda translate() mută un element din poziția sa curentă (în funcție de parametrii dați pentru axa x și axa y).

Primul proiect va fi mutarea unui grafic submarin. Submarinele trebuie să ia aer din când în când, așa că îl vom stila cu atenție cu translate() .

Pentru a-l muta din poziția inițială folosind transform: translate(x,y) , vor trebui specificate două noi valori. Pentru ca submarinul să se miște la dreapta și în sus, valoarea x ar trebui să fie pozitivă, iar valoarea y ar trebui să fie negativă. Dacă valoarea y este setată la 0, aceasta s-ar muta numai la dreapta și nu în sus.

Submarinul urcând aer cu transform()

În acest exemplu, vom muta obiectul 200px la dreapta și 25px în sus. Sintaxa este transform: translate(200px,-25px); iar obiectul se va deplasa pe .underwater . Prin crearea stilurilor pentru mișcarea în .underwater:hover .move-right , acțiunea se va întâmpla la hover.

Iată HTML-ul de pornire:

<div class="underwater">
  <div class="object submarine move-right">
  	<!-- image is set as a background image on submarine -->
  </div>
</div>

Vezi asta pe Codepen.

Într-adevăr, nu este nevoie de mult CSS pentru a face această animație de bază:

.underwater {
  position: relative;
  min-height: 600px;
  background-color: #4fc3da;
}

.underwater:hover .move-right{
    transform: translate( 200px ,-25px );
    -webkit-transform: translate( 200px ,-25px ); /** Chrome & Safari **/
    -ms-transform: translate( 200px ,-25px ); /** Firefox **/
}

.submarine {
  height: 200px;
  background: url("little-submarine.svg") no-repeat;
}

.object {
  transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -ms-transition: all 2s ease-in-out; /** Opera **/
}

După cum puteți vedea, coordonatele noastre ar cădea în pătratul din dreapta sus. La hover, submarinul se mută la noile coordonate din cauza transformării.

Lucrurile arată lin din cauza tranziției. Durata transition-duration a fost setată la 2sec , ceea ce nu este prea rapid pentru această animație. Funcția transition-timing-function a fost setată la ease-in-out ceea ce îi oferă un început și un sfârșit mai lent. Dacă durata de timp a fost mărită la ceva mai mare, acest lucru ar fi foarte evident.

Animație de bază doi: Mișcare orizontală cu cadre cheie și animație

Transformarea este folosită puțin diferit în acest exemplu. Cadrele cheie și proprietatea animație vor fi utilizate pentru a crea următoarea animație.

Elementele de bază ale cadrelor cheie

În interiorul @keyframes este locul în care definiți stilurile și etapele pentru animație. Iată exemplul pe care îl vom folosi, care va ajuta la obținerea unui efect de „fade in în timp ce vă deplasăm în jos”:

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translate(0, 0);
  }

  100% {
    opacity: 1;
    transform: translate(0, 30px);
  }
}

Valorile de transformare sunt încorporate în cadrele cheie. Plasarea inițială este setată la 0%, iar la 100%, poziția se va deplasa în jos cu 30 px.

Elementele de bază ale animației

Pentru a utiliza animația CSS3, specificați cadre cheie pentru animație.

Cum să utilizați CSS Feature Interogări

Lumea designului web este în continuă schimbare și este interesant să ții pasul cu noile tendințe de design în CSS. Dacă sunteți un utilizator timpuriu al CSS, este posibil să așteptați deja să utilizați lucruri precum CSS Grid...

Așa cum este proiectat mai sus, @keyframes păstrează ce stiluri va avea elementul în anumite momente.

Ori de câte ori faceți acest lucru, asigurați-vă că dați animației un nume descriptiv. În acest caz, folosim fadeOut . Orice clasă care include fadeOut va fi aplicată. În etapele animației, „de la” este setat la 0% și „la” este setat la 100%. Acest exemplu este destul de simplu cu doar cele două etape, dar cu siguranță pot fi adăugați mai mulți pași între ele.

Acțiuni specifice cu subproprietăți de animație

Proprietatea animație este folosită pentru a apela @keyframes în interiorul unui selector CSS. Animațiile pot și vor avea adesea mai multe subproprietăți.

Cadrele cheie definesc cum va arăta animația; subproprietățile definesc reguli specifice pentru animație. Timpul, durata și alte detalii cheie ale modului în care ar trebui să progreseze secvența de animație sunt toate incluse în subproprietăți.

Iată câteva exemple de subproprietăți de animație:

• Animation-name: numele @keyframesat-rule , care descrie cadrele cheie ale animației. Numele fadeOut din exemplul anterior este un exemplu de animation-name .
• Durata animației: durata de timp pe care o animație ar trebui să o ia pentru a finaliza un ciclu complet.
• Animation-timing-function: sincronizarea animației, în special modul în care animația trece prin cadrele cheie. Această funcție are capacitatea de a stabili curbele de accelerație. Exemplele sunt linear , ease , ease-in , ease-out , ease-in-out sau cubic-bezier .
• Animation-delay: Întârziere între momentul în care elementul este încărcat și începutul animației.
• Animation-iteration-count: Numărul de ori când animația ar trebui să se repete. Vrei ca animația să continue pentru totdeauna? Puteți specifica infinite pentru a repeta animația la nesfârșit.
• Direcția animației: Aceasta determină dacă animația ar trebui să alterneze direcția la fiecare rulare prin secvență sau să se reseteze la punctul de pornire și să se repete.
• Animation-fill-mode: Valori care sunt aplicate de animație atât înainte, cât și după ce a fost executată.
• Animation-play-state: Cu această opțiune, puteți întrerupe și relua secvența de animație. Exemplele sunt none , forwards , backwards sau both .

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
}

Iată cum ar arăta scris cu stenografie:

animation: 4s ease-in-out 1 paused fadeInDown;

Iată structura HTML:

<div class="underwater">

    <div class="content-wrap fadeInDown">

    <div class="submarine"></div>

      <h2>Cute Submarine</h2>

      <p>Text here.</p>

    </div>

</div>

Clasa fadeInDown face ca submarinul și conținutul să se miște în sus și în jos.

Faceți animația mai fluidă prin ajustarea cadrelor cheie

Cu încă câteva cadre cheie, putem face animația mult mai fluidă.

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(5px);
  }

  25% {
    opacity: .9;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: .9;
    transform: translateY(0);
  }
}

Vezi asta pe Codepen.

Ajustarea timpului animației

Adăugarea mai multor cadre cheie a ajutat la netezirea animației, dar putem adăuga puțin mai multă interactivitate cu mai multe cadre cheie și o întârziere a textului pe div care conține tot textul. Este un efect distractiv ca submarinul să sară de pe text, așa că alinierea întârzierii cu mișcarea submarinului permite acest lucru.

HTML-ul va avea aplicate clasele efective:

<div class="underwater">

    <div class="submarine move-down fadeInDown"> </div>

    <div class="moving-content move-down text-delay fadeInDownText">

      <p>Text goes here.</p>

    </div>

</div>

Și iată CSS-ul actualizat care permite animația interactivă:

@keyframes fadeInDown {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  25% {
    opacity: 1;
    transform: translateY(15px);
  }

  50% {
    opacity: 1;
    transform: translateY(30px);
  }

  75% {
    opacity: 1;
    transform: translateY(15px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDownText {
  0% {
    opacity: .8;
    transform: translateY(0);
  }

  100% {
    opacity: 1;
    transform: translateY(35px);
  }
}

.fadeInDown {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

.fadeInDownText {
    -webkit-animation-name: fadeInDownText;
    animation-name: fadeInDownText;
}

 .move-down{
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1
}

.text-delay {
    -webkit-animation-delay: 2s; /* Safari 4.0 - 8.0 */
    animation-delay: 2s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

Vezi asta pe Codepen.

Bara de progres cubic-bezier în animația CSS3

Este timpul să sărbătorim progresul nostru în animație făcând o bară de progres!

Toate conceptele pe care le-am abordat se vor reuni pentru a crea ceva de genul acesta. O bară de progres este un element foarte comun al UI, așa că crearea a ceva funcțional ca acesta vă va ajuta să vedeți cum pot fi animate alte elemente web.

Iată HTML-ul de pornire:

<div class="container">
  <div class="row">
    <div class="masthead">
      <p>CSS3 Loading Bar</p>
    </div>
  </div>
 <div class="fast-loader"></div>
</div>

Și CSS pentru a-l face să prindă viață:

@keyframes speedSetting {
  0% { width: 0px; }
  100% { width: 100%; }
}

@keyframes progressMotion {
  0% { opacity: 1; }
  50% {opacity: 1; }
  100% { opacity: 0; }
}

.fast-loader {
  width: 0px;
  height: 10px;
  background: linear-gradient(to left, blue,rgba(255,255,255,.0));
  animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
-webkit-animation: speedSetting 2s cubic-bezier(1,.01,0,1) infinite, progressMotion 2s ease-out infinite;
}

În primul set de cadre cheie, lățimea merge de la 0 la 100% cu o durată de două secunde. Cadrele cheie aflate în progressMotion de mișcare controlează opacitatea.

Curba CSS Bezier

Funcția cubic-bezier() poate fi utilizată cu proprietatea transition-timing-function pentru a controla modul în care o tranziție își va schimba viteza pe durata ei. Veți vedea asta în animație. Vedeți cum începe puțin mai lent și apoi crește ritmul?

Este util să imaginezi un înveliș Bezier ca un pătrat. Stânga jos și dreapta sus sunt locuri în care sunt punctele cheie, care sunt P0 și P3. Acestea sunt întotdeauna setate la (0,0) și (1,1), care nu se schimbă. Cu toate acestea, P1 și P2 pot fi mutate cu funcția cubic-bezier() dacă specificați puncte noi cu o valoare x sau y.

• x1 este coordonata x a punctului de control p1
• y1 este coordonata y a punctului de control p1
• x2 este coordonata x a punctului de control p2
• y2 este coordonata y a punctului de control p2

Iată câteva exemple de valori:

x1 = .7
y1 = .16
x2 = .2
y2 = .9

Deci un exemplu ar putea arăta astfel:

cubic-bezier(.7,.16,.2,.9)

Bara de progres este un exemplu excelent al modului în care un bezier poate personaliza sincronizarea unei animații. Cu transformări, tranziții și multe alte opțiuni, animațiile personalizate pot fi create cu ușurință. Sperăm că vederea acestor exemple de animație CSS3 de bază v-a ajutat să vedeți ce alte posibilități există.

Ce urmează: pluginuri WordPress pe care le veți iubi

Descărcați această carte electronică pentru o listă cu cele mai recomandate plugin-uri pentru dezvoltatori! Am descoperit că toate aceste plugin-uri sunt ușor de utilizat, nu sunt prea grele de performanță pe site-ul dvs. și sunt de-a dreptul de încredere.