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％处停止，但会返回到以前的状态（带有交叉线），尽管我在animation-fill-mode模式下使用了正转... < / p>

关于它为何如此表现的任何想法吗？

谢谢！

Answer 1

这是因为您的动画还没有100％完成。

将最后一行更改为：

100% {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, rgba(255, 255, 255, 0.2) 20px, rgba(255, 255, 255, 0.2) 20px);
}

动画“前进”不保留最后一个状态

1 个答案: