@keyframes komandası

@keyframes komandası animasiyanın açar kadrlarını təyin edir. Açar kadr, elementə müəyyən bir zamanda tətbiq olunan, məsələn, mövqe, ölçü, rəng və s. kimi CSS elementimizin müxtəlif xassələrini təmsil edir.

Sintaksis

css@keyframes animasiya adı {
  açar kadrlar
}

Nümunə

Açar kadrları təyin edirik:

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

Результат:

Nümunə

İndi isə kvadratımızı animasiya ilə yuxarıdan aşağıya hərəkət etdirək:

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

Результат:

Nümunə

Gəlin fiqurumuzun enini animasiya ilə faizlə təyin olunmuş açar nöqtələrindən istifadə edərək artıraq:

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

Результат:

Nümunə

İndi isə fiqurumuzun şəffaflığını dəyişək:

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

Результат:

Həmçinin bax