悬停跳动的关键帧动画突然停止

Question

如下面的动画所示，如果将鼠标悬停，动画会突然停止。我想将其过渡到最终位置。有办法在保留关键帧的同时做到这一点吗？

.bounce{
    width:100px;
    height:100px;
    background:red;
    margin-top:100px;
}

.bounce:hover {
    animation-name: bounce;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}

@keyframes bounce {
  0%, 100%, 20%, 50%, 80% {
    -webkit-transform: translateY(0);
    -ms-transform:     translateY(0);
    transform:         translateY(0)
  }
  40% {
    -webkit-transform: translateY(-30px);
    -ms-transform:     translateY(-30px);
    transform:         translateY(-30px)
  }
  60% {
    -webkit-transform: translateY(-15px);
    -ms-transform:     translateY(-15px);
    transform:         translateY(-15px)
  }
}

<div class="bounce"></div>