Animation CSS3动画问题

如何使CSS3动画播放到最后，然后停止播放。我不希望它将被转换的元素返回到它们的初始状态

---

现在，我正在使用一些javascript在动画持续时间之后向元素添加一个类，其属性与动画中的100%相同。

如果这个问题仍然存在，我认为使用CSS3动画是不可能的，因为它们是：

动画不会影响应用动画之前、动画延迟过期之前以及动画结束之后的计算值

但是，您应该能够使用CSS3转换实现基本效果。有一个例子说明了如何做到这一点。以下是相关[释义]摘录：

#box.left { margin-left: 0; }
#box.right { margin-left: 1000px; }
#box { -webkit-transition: margin-left 1s ease-in-out; }

// Run this to animate to the left
document.getElementById('box').className = 'left';

// Run this to animate to the right
document.getElementById('box').className = 'right';

---

将结束值放在主css类中，将动画关键帧中的开始值放在0%：

@keyframes test {
  0% {
    background-color: #ff0000; /* start value */
  }
  100% {
    background-color: #0000ff;
  } 
}

a {
  background-color: #ff0000; /* normal state */
}

a:hover {
  animation-name: test;
  animation-duration: 1s;
  background-color: #ff0000; /* final state, after animation is finished */
}

至少在Webkit中，“动画填充模式”定义为“向前”，这是可能的。我用这样的代码得到了这个结果：

@-webkit-keyframes test {
  100% { background-color: #0000ff; }
} 

a { background-color: #ff0000; }

a:hover { -webkit-animation: test 1s 1 ease forwards }

请注意，没有必要在0%关键帧中指定开始颜色，在：hover中指定结束颜色

---

当然，这段代码是特定于Webkit的。我没有在其他浏览器中尝试使用其他供应商前缀或常规“动画”属性。

动画填充模式：转发 “动画填充模式CSS”属性指定CSS动画在执行前后应如何将样式应用于其目标