HTML5 - Animații

Animațiile sunt efecte precum tranzițiile, dar îmbunătățite în funcționalitatea lor, în sensul că există un control superior asupra a ceea ce se poate face, datorită disponibilității mai multor opțiuni pentru a face schimbări de la un stil la altul.
Proprietăți de animație
Așa cum am spus anterior, animațiile sunt tranziții îmbunătățite datorită numărului de opțiuni și proprietăți care ne permit să avem un control mai mare asupra lor, vom revizui fiecare dintre ele:

• animatie-intarziere: Aplicați un anumit timp pentru a putea începe animația odată ce este activată.
• animatie-regie: Specifică dacă animația trebuie redată înapoi sau în cicluri alternative.
• durata animației: Indică intervalul de timp în care ar trebui redată animația.
• animație-iterație-număr: Indică de câte ori animația trebuie repetată și poate chiar să plaseze valoarea infinit pentru repetări infinite ale aceluiași.
• nume-animație: Specifică numele animației.
• animație-joc-stare: Permite întreruperea animației și apoi continuarea redării.
• funcții de sincronizare-animație: Specificați cum trebuie tratate valorile intermediare în animație
• animaţie: Este comanda rapidă cu care putem încorpora toate proprietățile animației într-o singură declarație CSS și are următoarea structură:

animaţie:
Acum, că cunoaștem proprietățile disponibile, să vedem un exemplu de cod pentru ao analiza:

 Exemplu
Există o mulțime de feluri diferite de fructe - există peste 500 de soiuri de banane numai. Până când adăugăm nenumăratele tipuri de mere, portocale și alte fructe cunoscute, ne confruntăm cu mii de alegeri.

În acest exemplu vedem că în momentul de a face : pluteste pe element vom avea o întârziere de 100ms apoi animația va avea 500ms de executat și va fi repetată de un număr infinit de ori.
Apoi vedem că odată cu numele pe care l-am dat aplicației vom folosi proprietatea @keyframes unde vă vom spune ce elemente vor fi animate.
Să vedem cum ar trebui să arate în browserul nostru:

MARI

După cum vedem, există o modificare a fundalului elementului, apoi culoarea literei și dimensiunea fontului, la sfârșitul animației revine la starea inițială și întregul proces se repetă din nou, acest lucru îi conferă o mișcare care nu există odată cu utilizarea tranzițiilor.
Cu aceasta demonstrăm, de asemenea, importanța numelui animației, deoarece funcționează ca identificator pentru a-i putea atribui un @ cadrele cheie.
Cu aceasta terminăm tutorialul și cu aceasta suntem deja capabili să realizăm animații de bază, pentru a oferi mai multă mișcare documentelor noastre HTML.V-a plăcut și ați ajutat acest tutorial?Puteți recompensa autorul apăsând acest buton pentru a-i oferi un punct pozitiv