Regula @keyframes

Regula @keyframes definește cadrele cheie ale animației. Un cadru cheie reprezintă diferite proprietăți ale elementului nostru CSS, de exemplu, poziția, dimensiunea, culoarea etc., care sunt aplicate elementului la un moment specificat.

Sintaxă

css@keyframes numele-animației {
  cadrele-cheie
}

Exemplu

Definim cadrele cheie:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 400px;
  }
}

#elem {
  animation: anim 3s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Exemplu

Acum să mutăm pătratul nostru cu ajutorul animației de sus în jos:

html<div id="elem"></div>

css@keyframes anim {
  from {
    margin-top: 0%;
  }
  to {
    margin-top: 10%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Exemplu

Să creștem lățimea formei noastre cu ajutorul animației, definind punctele cheie în procente:

html<div id="elem"></div>

css@keyframes anim {
  from {
    width: 10%;
  }
  to {
    width: 40%;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Exemplu

Acum să schimbăm transparența formei noastre:

html<div id="elem"></div>

css@keyframes anim {
  from {
    background-color: #467CBC;
  }
  to {
    background-color: #C2DDFD;
  }
}

#elem {
  animation: anim 2s infinite;
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

Результат:

Vezi și