Question

我有以下代码动画元素的背景位置以创建关键帧动画。这是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/

Answer 1

你的图像在第12帧重复，图像完全向左偏移，你看到它的重复开始。只需在11个步骤后停止动画：

＆＃13;

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 */
}

＆＃13;

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

＆＃13;

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

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

1 个答案: