Dacă lucrați cu tehnologii web precum CSS, HTML și JavaScript, este important să aveți cunoștințe de bază despre animațiile și tranzițiile CSS.

În acest articol vom învăța cum să realizăm câteva animații de tranziție de bază folosind CSS.

Cum se animă un element cu tranziție de bază în cursă

În acest exemplu, vom face opacitatea unui element să se schimbe atunci când un utilizator trece deasupra elementului.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <style>
    .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
    }
    .elem:hover {
      opacity: 0.5;
    }
  </style>
  <body>
    <div class="elem"></div>
  </body>
</html>
Exemple de tranzitie CSS Cum se utilizeaza animatia Hover

Aceasta este o tranziție simplă care poate fi declanșată atunci când trecem peste element. Putem adăuga mai multe tranziții care vor rula în același timp.

Să adăugăm o proprietate de transformare a scării pentru a adăuga tranziția la scară la element.

 .elem:hover {
      transform: scale(1.1);
    }
1611729847 233 Exemple de tranzitie CSS Cum se utilizeaza animatia Hover

Dar tranziția nu pare a fi lină, deoarece nu am definit durata tranziției sau nu am folosit nicio funcție de sincronizare.

Dacă adăugăm transition proprietate, va face ca elementul să se miște mai ușor.

 .elem {
      background: blueviolet;
      width: 300px;
      height: 150px;
      margin: 20px auto;
      transition: 500ms linear; 
    }
1611729847 647 Exemple de tranzitie CSS Cum se utilizeaza animatia Hover

Să prezentăm cum funcționează proprietatea de tranziție:

  transition: 500ms linear;
  • 500ms: durata tranziției în milisecunde
  • linear: funcția de sincronizare
div {
    transition: <property> <duration> <timing-function> <delay>;
}

Putem adăuga mai multe opțiuni precum cele de mai jos (exemple din MDN):

#delay {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
}

Deci, ce face acest cod?

  • transition-property: proprietatea pe care doriți să o animați. Poate fi orice element CSS de genul background, height, translateY, translateX, si asa mai departe.
  • durata de tranziție: durata tranziției
  • întârziere de tranziție: întârzierea înainte de începerea tranziției

Puteți afla mai multe despre diferitele utilizări ale transition în CSS aici.

Cum să faceți tranzițiile mai interactive folosind proprietatea animației și cadrele cheie

Putem face mai mult cu tranzițiile CSS pentru a face această animație mai creativă și mai interactivă.

Cum să mutați un element cu cadre cheie

Să vedem un exemplu în care elementul se deplasează din punctul A în punctul B. Vom folosi translateX și translateY.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <style>
    .elem {
      background: orange;
      width: 300px;
      height: 150px;
      animation: moveToRight 2s ease-in-out;
      animation-delay: 1000ms;
    }

    @keyframes moveToRight {
      0% {
        transform: translateX(0px);
      }
      100% {
        transform: translateX(300px);
      }
    }
  </style>
  <body>
    <div class="elem"></div>
  </body>
</html>

Și asta este ceea ce obținem:

1611729847 427 Exemple de tranzitie CSS Cum se utilizeaza animatia Hover

De data aceasta am folosit proprietăți noi, cum ar fi animația și cadrele cheie. Am folosit animation proprietate pentru a defini numele și durata animației și cadrele cheie ne permit să descriem cum ar trebui să se deplaseze elementul.

  animation: moveToRight 2s ease-in-out;

Aici am numit animația moveToRight – dar poți folosi orice nume îți place. Durata este 2s , și ease-in-out este o funcție de sincronizare.

Există și alte funcții de sincronizare pe care le puteți folosi ease-in, linear, ease-out care practic fac animația mai lină. Puteți afla mai multe despre funcțiile de sincronizare aici.

@keyframes preia numele animației. În acest caz este moveToRight.

 @keyframes moveToRight {
      0% {
        transform: translateX(0px);
      }
      100% {
        transform: translateX(300px);
      }
    }

keyframes va executa animația în mai mulți pași. Exemplul de mai sus folosește un procent pentru a reprezenta intervalul sau ordinea tranzițiilor. Am putea folosi și from și to metode. ca mai jos “

 @keyframes moveToRight {
     from {
        transform: translateX(0px);
      }
     to {
        transform: translateX(300px);
      }
    }

from reprezintă punctul de plecare sau primul pas al animației.

to este punctul final sau ultimul pas al animației de executat.

Poate doriți să utilizați un procent în unele cazuri. De exemplu, spuneți că doriți să adăugați mai mult de două tranziții care vor fi executate într-o succesiune, cum ar fi următoarele:

 @keyframes moveToRight {
     0% {
        transform: translateX(0px);
      }
     50% {
        transform: translateX(150px);
      }
       100% {
        transform: translateX(300px);
      }
    }

Putem fi mai creativi și să animăm mai multe proprietăți în același timp, ca în exemplul următor:

1611729847 397 Exemple de tranzitie CSS Cum se utilizeaza animatia Hover

Vă puteți juca cu proprietăți și tehnici de animație în sandbox aici:

Sunt mult mai multe lucruri pe care le putem face cu cadre cheie. În primul rând, să adăugăm mai multe tranziții la animația noastră.

Cum să animați mai multe proprietăți și să le includeți în tranziție

De data aceasta vom anima fundalul și vom face ca elementul să se miște într-un model pătrat. Vom face ca animația să ruleze pentru totdeauna folosind infinite proprietate ca funcție de sincronizare.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <style>
    .elem {
      background: orange;
      width: 250px;
      height: 250px;
      border-radius: 10px;
      animation: moveToLeft 5s linear infinite;
      animation-delay: 1000ms;
    }

    @keyframes moveToLeft {
      0% {
        transform: translateX(0px);
        background: linear-gradient(
          to right,
          #ff8177 0%,
          #ff867a 0%,
          #ff8c7f 21%,
          #f99185 52%,
          #cf556c 78%,
          #b12a5b 100%
        );
      }
      25% {
        transform: translateX(400px);
        background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
      }
      50% {
        transform: translateY(200px) translateX(400px);
        background: linear-gradient(to top, #30cfd0 0%, #330867 100%);
      }

      75% {
        transform: translateX(0px) translateY(200px);
        background: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
      }
      100% {
        transform: translateY(0px);
      }
    }
  </style>
  <body>
    <div class="elem"></div>
  </body>
</html>

Să o descompunem. Mai întâi adăugăm infinite pentru a face ca animația să ruleze pentru totdeauna.

animation: moveToLeft 5s linear infinite;

Și apoi am împărțit animația în patru pași. La fiecare pas, vom rula o tranziție diferită și toată animația va rula într-o succesiune.

  • Primul pas: setați elementul orizontal la translateX(0px)și schimbați fundalul în gradient.
 0% {
        transform: translateX(0px);
        background: linear-gradient(
          to right,
          #ff8177 0%,
          #ff867a 0%,
          #ff8c7f 21%,
          #f99185 52%,
          #cf556c 78%,
          #b12a5b 100%
        );
      }
  • A doua animație va muta elementul de la stânga la dreapta și va schimba culoarea de fundal.
 25% {
        transform: translateX(400px);
        background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
      }
  • A treia animație va muta elementul în jos folosind translateY și schimbați din nou culoarea de fundal.
  • În al patrulea pas, elementul se va deplasa înapoi la stânga și va schimba culoarea de fundal.
  • În a cincea animație, elementul ar trebui să revină la locul său original.

Înfășurându-se

În acest articol, am acoperit diverse lucruri pe care le puteți face cu tranzițiile CSS. Puteți utiliza tranzițiile CSS în multe moduri în aplicațiile dvs. pentru a crea o experiență de utilizare mai bună.

După ce ați învățat elementele de bază ale animațiilor CSS, poate doriți să mergeți dincolo și să faceți lucruri mai complexe care necesită interacțiunea cu utilizatorul. Pentru aceasta puteți utiliza JavaScript sau orice bibliotecă de animație terță parte.

Bună, numele meu este Said Hayani, pe care l-am creat subscriere.io pentru a ajuta creatorii, bloggerii și influențatorii să-și dezvolte publicul prin intermediul buletinului informativ.