动画“前进”不会保持最后的状态

Question

我有这样的代码：

​

function startAnimation() {
  $(".block").addClass("removed");
}

.block {
  width: 200px;
  height: 200px;
  border: 1px solid #444;
  background-color: #000;
  position: relative;
}
.block:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.2) 20px);
}
.block.removed:after {
  animation: lock_removed 1s forwards;
}

@keyframes lock_removed {
  5% {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 11px, rgba(255, 255, 255, 0.2) 11px, rgba(255, 255, 255, 0.2) 20px);
  }
  10% {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(255, 255, 255, 0.2) 12px, rgba(255, 255, 255, 0.2) 20px);
  }
  15% {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 13px, rgba(255, 255, 255, 0.2) 13px, rgba(255, 255, 255, 0.2) 20px);
  }
  20% {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 14px, rgba(255, 255, 255, 0.2) 14px, rgba(255, 255, 255, 0.2) 20px);
  }
  25% {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 15px, rgba(255, 255, 255, 0.2) 15px, rgba(255, 255, 255, 0.2) 20px);
  }
  30% {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 16px, rgba(255, 255, 255, 0.2) 16px, rgba(255, 255, 255, 0.2) 20px);
  }
  35% {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 17px, rgba(255, 255, 255, 0.2) 17px, rgba(255, 255, 255, 0.2) 20px);
  }
  40% {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 18px, rgba(255, 255, 255, 0.2) 18px, rgba(255, 255, 255, 0.2) 20px);
  }
  45% {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 19px, rgba(255, 255, 255, 0.2) 19px, rgba(255, 255, 255, 0.2) 20px);
  }
  50% {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255, 255, 255, 0.2) 20px, rgba(255, 255, 255, 0.2) 20px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block"></div>
<input type="button" value="Start Animation" onClick="startAnimation()"/>

​

问题是，在单击按钮后，动画会运行，但不会在100%停止，而是恢复到之前的状态(带有交叉线)，尽管我在动画填充模式中使用了forwards ...

你知道它为什么会这样吗？

谢谢!