html - 停止关键帧动画的奇怪抖动

Question

我已经创建了一个关键帧，所以当我将鼠标悬停在一个按钮上时，它会上下摆动，但是当我将鼠标悬停在顶部边缘时，它会变得很奇怪，不确定这是否与我的代码有关。如果有人对这是什么原因有任何想法，那就太好了......

更新：这里是行为的链接 我放慢了一点，但这就是我正在经历的......

按钮html：

<button class="button">Mash!</button>

按钮CSS：

.button {
  margin-top: 5vh;
  background-color: #000;
   color: #fff; 
   border:none;
   text-decoration: none;
   text-transform: uppercase;
   cursor: pointer;
   letter-spacing: 4px;
   padding: 2vw 4vw;
   font-size: 2.5vw;
   font-family: bebas-neue-by-fontfabric;
   font-weight: 700;
}

button:focus {
  outline: 0;
}

.button:hover{ 
  animation: mash 1000ms infinite alternate;
  animation-timing-function: linear;      
}

动画CSS：

@keyframes mash {
  0% { 
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px); }
  20% { 
    -webkit-transform: translate(0, -3px);
    transform: translate(0, -3px); }
  40% { 
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px); }
  60% { 
    -webkit-transform: translate(0, -3px);
    transform: translate(0, -3px); }
  80% { 
    -webkit-transform: translate(0, 3px);
    transform: translate(0, 3px); }
  100% { 
    -webkit-transform: translate(0, -3px);
    transform: translate(0, -3px); }
}

标签： htmlcsscss-animations