Html 保留CSS动画颜色填充

我正在尝试创建一个改变卷轴颜色的标志。我简化了css，使其更易于解释

@-webkit-keyframes rotate-change {
        100% {fill:blue}
}

.change{
  fill:red;
  -webkit-animation: rotate-change;
}

类别为“.change”的项目以红色填充颜色开始。我想要的是在动画结束后填充颜色变为蓝色，就像“-webkit关键帧”一样。唯一的问题是，在动画期间，填充颜色从红色变为蓝色，但当动画结束时，填充颜色将恢复为红色。有没有一种方法可以永久保持动画的填充颜色，即使在动画结束后也是如此？

试试看

animation-fill-mode:forwards;

---

谢谢你的建议，但填充物只是恢复到原来的颜色…@corybantic它本应该是有效的，但我不太确定为什么。。。我将继续尝试查看我的代码有什么问题。：）嗯，我正在尝试设置SVG徽标的动画，使其旋转以形成一个功能区，并改变颜色。实际的代码要长得多（而且更复杂），所以我只想要一个简单的例子，说明如何在动画之后保留颜色。啊！我使用jQuery触发滚动动画，所以我必须在jQuery Css代码中设置动画填充模式：向前，而不是正常的Css代码！谢谢@Akshay！！