@keyframes regula CSS permite dezvoltatorului să controleze CSS pași intermediari într-o secvență de execuție de animație prin crearea de cadre cheie (sau puncte intermediare) de-a lungul secvenței de animație, care se realizează la execuție animație anumite momente. Acest lucru oferă mai mult control asupra etapelor intermediare ale secvenței de animație decât atunci când browser-ul se ocupă în mod automat totul.
Pentru a utiliza keyframes, creați o regulă pe nume @keyframes, care este apoi utilizat în animație de proprietate (sau animație nume-) pentru a adăuga lista de cadre cheie în animație. Fiecare regulă @keyframes conține o listă de stiluri pentru selectoare cadre cheie, fiecare dintre care constă dintr-un procent pentru animație, la care cadrul cheie, precum și un bloc de cod care conține informații despre stilul pentru acest cadru cheie.
Enumerați keyframes poate fi în orice ordine, acestea vor fi în continuare procesate în ordinea în care sunt specificate puncte procentuale în cazul în care trebuie să lucreze.
Valorile valide pentru selectoare keyframes
Pentru lista de keyframes să fie corectă, aceasta trebuie să includă cel puțin două valori: 0% (sau de la) și 100% (sau), care este, porni și opri ciclul de animație. Dacă ambele aceste valori nu sunt specificate, atunci toate regula CSS este considerată inacceptabilă și nu pot fi folosite pentru animatie.
Dacă o regulă are proprietăți care nu pot fi animate, ele vor fi ignorate, dar proprietățile acceptate vor continua să fie animat.
valori de proprietate
Obligatoriu. Specifică numele animației.
Obligatoriu. Este demonstrat ca procent din durata animației.
0-100%
de la (la fel ca 0%)
la (aceeași ca 100%)
Notă: Puteți specifica mai multe selectoare într-o singură animație cadru cheie.
Obligatoriu. Una sau mai multe proprietăți valabile stil CSS.
Rezultatul acestui exemplu: