悬停按钮无法使用关键帧正确减少

Question

如何根据这支笔 here 看着脉冲按钮使我的按钮在悬停时减小尺寸？

我的 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>

当我悬停时，宽度会减小，但效果与参考笔不同，参考笔会变小，如果这是正确的解释的话。

我的笔可以找到here

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>