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

Question

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

Рейтинг: 0Ответов: 1Опубликовано: 26.07.2025

есть блок

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

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

@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>

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

css css-animation

Источник: Stack Overflow на русском

Answer 1

▲ 2

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

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

html {
  font-family: sans-serif;
}

body {
  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 1.5s infinite ease-in-out;
}

@keyframes animTopBottom {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

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

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

Ответы