CSS动画在结束时重置为第一个关键帧答案

【问题标题】：CSS Animation resets to first keyframe at endCSS动画在结束时重置为第一个关键帧
【发布时间】：2015-01-13 17:42:01
【问题描述】：

我有以下代码为元素的背景位置设置动画以创建关键帧动画。它是 12 帧，图像是 1536px。

但是，即使我有 -webkit-animation-fill-mode: forwards;，动画也会在最后重置回第一帧...我该如何停止呢？

HTML：

<div class="sequence animate"></div>

CSS：

div.sequence
{
    width: 128px;
    height: 128px;
    background: url('./img/sequence.png');
}

div.sequence.animate
{
    -webkit-animation: boxopen 4s steps(12);
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes boxopen {
    from {background-position: 0;}
    to {background-position: -1536px;}
}

在这里提琴：http://jsfiddle.net/zpsa37m3/1/

【问题讨论】：

我不确定这是否是您想要的。
啊！我的错。我想你想在最后一个关键帧停止它。

标签： html css css-animations

【解决方案1】：

您的图像会重复，因此到第 12 帧时，图像完全向左偏移，您会看到它的开头重复。只需在 11 步后停止动画：

div.sequence
{
    width: 128px;
    height: 128px;
    background: url('http://i60.tinypic.com/1otwkg.png');
}

div.sequence.animate
{
    -webkit-animation: boxopen 6s steps(11); /* 11 steps not 12 */
    -webkit-animation-fill-mode: forwards;
}

@-webkit-keyframes boxopen {
    from {background-position: 0;}
    to {background-position: -1408px;} /* stop at the left of frame 12 */
}

&lt;div class="sequence animate"&gt;&lt;/div&gt;

演示：http://jsfiddle.net/zpsa37m3/3/

【讨论】：