Animation қасиеті

animation қасиеті - бұл анимацияға арналған қысқартылған қасиет, анимацияның барлық қасиеттерін bір мезгілде орнатуға мүмкіндік береді: 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 және т.б. жатады.

Сондай-ақ қараңыз