@keyframes Regula - permite utilizatorului să descrie proprietățile CSS animație ca o listă a personalului cheie.
- - Specifică numele animației ca un șir în ghilimele simple (acest nume este apoi utilizat la apelarea animației ca valoarea unei proprietăți de animație nume)
- - stabilește selectorii care definesc cadrele cheie. Acestea pot fi:
- din - în interiorul acestei valori proprietăți selectori animate descrise în animație de timp inițial (de asemenea, poate fi descrisă de cadrul inițial al animației, folosind un selector echivalent cu 0%)
- la - în interiorul acestei valori proprietăți selectori animate descrise în momentul final al animației (de asemenea, poate fi descrisă de către ultimul cadru al animației, folosind selectorul echivalent 100%)
- - valori descriu proprietățile animate într-un moment dat (timpul este măsurat ca un procent din valoarea proprietăților de animație durată)
- - proprietate CSS animat
- - valori ale proprietăților animate la momentul descris de selectorul cadru
Exemplu de cod
In exemplul descris animația mișcarea (coordonatele bloc schimba în timp). La prima animație descris de selectorul de pe unitatea cadru coordonatele top: 50px, stânga: 0px. keyframe Următoarea descrie valorile de proprietate în 50% din animație timp (în acest exemplu, - 5 secunde). Coordonatele vor bloca sus: 150px, stânga: 100px. Ultima oară descris la selectorul cadru (prin 10c) unitate primesc coordonate absolute top: 400px, stânga: 300px. NOTĂ! Animația nu este un trei nesimțit, dar fără probleme.
Acesta nu este acceptat în prezent de orice browser