Кнопка при наведении не уменьшает должным образом использование ключевых кадров

Question

Как я могу сделать так, чтобы моя кнопка уменьшала размер при наведении курсора согласно этой ручке здесь , глядя на кнопку пульса?

Мой CSS выглядит так:

.pulse {
  margin:100px;
  display: block;
  width: 170px;
  height: 22px;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
}

.pulse:hover {
  animation: pulse 2s infinite;
}

@keyframes pulse {
    0%{
        width: 170px;
    }
    50%{
        width: 120px;
    }
}

HTML:

<button class="pulse">Button styling</button>

При наведении курсора ширина уменьшается, но эффект не совпадает с эталонным пером, которое уменьшается со всех сторон, если это правильное объяснение.

Моя ручка может быть найдена здесь

Answer 1

попробуйте добавить преобразование, чтобы получить анимацию

.pulse {
  margin: 100px;
  display: block;
  width: 170px;
  height: 22px;
  border-radius: 50%;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204, 169, 44, 0.4);
  animation: pulse 2s infinite;
}

.pulse:hover {
  animation: none;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
  }
}

<button class="pulse">Button styling</button>