Amri @keyframes

Amri @keyframes huweka sura kuu za uhuishaji. Sura kuu inawakilisha mali mbalimbali za kipengele chetu cha CSS, kwa mfano, msimamo, ukubwa, rangi n.k., ambazo hutumika kwa kipengele katika wakati maalum.

Kisarufi

css@keyframes jina la uhuishaji {
  sura kuu
}

Mfano

Kuweka sura kuu:

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

Результат:

Mfano

Sasa hebu tusogeze mraba wetu kutoka juu kwenda chini kwa kutumia uhuishaji:

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

Результат:

Mfano

Hebu tuongeze upana wa umbo letu kwa kusaidia uhuishaji, kwa kuweka pointi kuu kwa asilimia:

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

Результат:

Mfano

Sasa hebu tubadilishe uwazi wa umbo letu:

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

Результат:

Tazama pia