Хосияти animation

Хосияти animation - хосияти ихтисор барои аниматсия мебошад, имкон медиҳад, ки ҳамаи хосиятҳои аниматсияро якбора муқаррар кунед: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-fill-mode, animation-play-state.

Тартиби қиматҳо аҳаммият надорад, вақти иҷрои аниматсия animation-duration ҳатман бояд пеш аз таъхир animation-delay қарор гирад. Фақат хосиятҳои animation-name ва animation-duration ҳатмианд.

Хосият инчунин метавонад қимати none-ро қабул кунад, ки аниматсияро комилан хомӯш мекунад. Ин қимат қимати пешфарз мебошад.

Синтаксис

cssинтихобкунанда {
  animation: қиматҳо;
}

Намуна

Дар ин намуна пеш аз аниматсия таъхир дар 3 сония (пеш аз ҳар навбозӣ), ва сипас аниматсия дар давоми 6 сония бозӣ карда мешавад:

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

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

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

Результат:

Намуна . Масъалаҳои имконпазир

Аниматсия, ки дар шакли мухтасари он сабт шудааст, метавонад аз рӯи номаш кор накунад. Биёед аниматсияи зеринро баррасӣ кунем:

css@keyframes reverse {
  from {
    left: 0;
  }
  to {
    left: 300px;
  }
}

Диққат диҳед, ман номи аниматсияро reverse истифода мебарам. Дар назари аввал, ҳамааш хуб аст, аммо аниматсия кор намекунад, зеро ки reverse - калимаи калидии дуруст барои хосияти animation-direction мебошад.

Инчунин аниматсия дар шакли мухтасар кор нахоҳад кард, агар дар ном истифодаи калимаҳои калидии дигар бошад. Аммо ҳама чиз дар ҳолати истифодаи шакли "пурра"-и тавсиф хуб кор мекунад.

Ба калимаҳои калидии-қиматии animation-direction, ки аниматсияҳоро вайрон мекунанд, калимаҳои калидиеро низ нисбат додан лозим аст, ки ба функсияҳои мувозинат марбутанд, ва инчунин infinite, alternate, running, paused ва ғайра.

Инчунин нигаред