Stopping strange juddering on keyframe animation

I have created a keyframe so when I hover on a button it wiggles up and down but I get this weird thing when I hover on the top edge it freaks out, not sure if this is something to do with my code or not. If anyone has any ideas on what is cause this that would be great...

the button html:

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

the 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;      
}

the animation 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); }
}