анимация подскока цифры

Question

есть блок

<div class="ch_cnt">1</div>

хочу сделать ему анимацию чтобы подпрыгивал немного вверх, затем вернулся на место время вверх-вниз 0.5 сек, пауза 3 сек.

пытался кейфреймами,

@keyframes ch_cnt {
  0% {
    margin-bottom: 0px;
  }

  50% {
    margin-bottom: 6px;
  }

  100% {
    margin-bottom: 0px;
  }
}

.ch_cnt {
  animation: ch_cnt 2s infinite alternate;
}

.ch_cnt {
  margin: 0px 3px;
  border: 1px solid #eee;
  border-radius: 10px;
  width: 15px;
  background-color: #b30000;
  animation: ch_cnt 2s infinite alternate;
}

<div class="ch_cnt">1<div>

никак не могу добиться нужного. то дергается, то подскок идет наоборот, сверху вниз

Answer 1

Для анимаций лучше использовать CSS свойства, которые задействуют только стадию композиции(к ним относится transform, opacity, filter, например), так как они не требуют перерасчёта layout и перерисовки элементов, обеспечивая более плавную и производительную анимацию

*, *::before, *::after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  font-family: sans-serif;
}

.parent-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.ch_cnt {
  border: 3px solid currentColor;
  display: inline-block;
  padding: 0.5rem 1rem;
  font-size: 2rem;
  animation: animTopBottom 4s infinite ease-in-out;
}

@keyframes animTopBottom {
  0% {
    transform: translateY(0);
  }
  12.5% {
    transform: translateY(-100%); /* вверх за 0.5 сек */
  }
  25% {
    transform: translateY(0);     /* вниз за 0.5 сек */
  }
  100% {
    transform: translateY(0);     /* пауза 3 сек */
  }
}

<div class="parent-box">
  <div class="ch_cnt">1</div>
</div>

Как правильно указать этап keyframes, чтобы, например, был промежуток в 0.5 секунд:

Берём время анимации - 4 секунды
Считаем время keyframes анимации за 1 или 100%
Вычисляем какую долю 0.5сек составляет от 4сек
0.5 секунд делим на 4 секунды - получается 0.125, или, при переводе в проценты, - 12.5%

Answer 2

@keyframes jumps {
  0%, 17%, 35%, 50%, 75%, to {
    transform: translateY(0)
  }
  20%, 32%{
    transform: translateY(-.25em)
  }
  24%, 26% {
    transform: translateY(-.45em)
  }
  25% {
    transform: translateY(-.5em)
  }
}

#x {
  animation: jumps 3.5s linear infinite;
  background: lime;
  display: list-item;
  height: 1em;
  width: 1em;
  margin-top: 1em;
  list-style: '5' inside;
  font-size: 35px;
  padding: .25em;
  color: black;
}

<div id='x'></div>

хоть тут время прыжка и ~0.63s, но принцип все же иллюстрирует.

если прям важно уложиться в .5s, можете ужать рамки, текущие 17% и 35%

а вообще, без пауз для этих целей очень хорошо подошла бы animation-timing-function с кубиком безье.

то как строится кубик можно глянуть здесь

БЛОГ НА HUSL

анимация подскока цифры

Ответы (2 шт):