时间戳

首页 > 解决方案 > 动画“转发”不保持最后状态

css - 动画“转发”不保持最后状态

问题描述

我有这个代码：

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% 停止，而是恢复到以前的状态（交叉线），尽管我在动画填充模式中使用了前进...

知道为什么它会这样吗？

谢谢！

标签： csscss-animations

解决方案

这是因为你的动画还没有 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);
}

推荐阅读