@keyframes buýrugy

@keyframes buýrugy animasiýanyň gurlap beriji kadrlaryny kesgitleýär. Gurlap beriji kadr, mysal üçin, ýerine ýetirilişi, ölçegi, reňki we ş.m. bolup bileren, belli bir wagt böleginde elemente goşulýan, biziň CSS elementimiziň dürli häsiýetleridir.

Sintaksis

css@keyframes animasiýanyň ady {
  gurlap beriji kadrlar
}

Mysal

Gurlap beriji kadrlary kesgitläň:

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;
}

Результат:

Mysal

Indi bolsa, kwadratymyzy ýokardan aşak animasiýa bilen hereket etdireliň:

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;
}

Результат:

Mysal

Şekilimiziň inişligini, gurlap beriji nokatlary prosentlerde kesgitlep, animasiýa bilen artdyralyň:

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;
}

Результат:

Mysal

Indi bolsa, şekilimiziň geçirijiligini üýtgeteliň:

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;
}

Результат:

Şeýle hem garalyň