CSS 动画在结束时重置为第一个关键帧
CSS Animation resets to first keyframe at end
我有以下代码为元素的背景位置设置动画以创建关键帧动画。 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;}
}
Fiddle 这里:http://jsfiddle.net/zpsa37m3/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 */
}
<div class="sequence animate"></div>
我有以下代码为元素的背景位置设置动画以创建关键帧动画。 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;}
}
Fiddle 这里:http://jsfiddle.net/zpsa37m3/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 */
}
<div class="sequence animate"></div>