无法在最后一帧停止动画

时间:2015-08-18 13:38:27

标签: css animation keyframe

我正在尝试播放我想在最后一帧停止的角色跳跃动画,但它并没有停止。我尝试使用

  

动画填充模式:前锋;

没有结果。

以下是我正在使用的代码

.kia-jump {
    width: 320px;
    height: 464px;
    position: absolute;
    top: 1%;
    left: 41%;
    background: url('../images/activity/KiaJumpingAnimation.png') left center;
    animation-fill-mode: forwards;
    animation: jumpAnim 1.67s steps(24) 1;
}

@keyframes jumpAnim {
    100% { background-position: -7920px; }
}

这是JSFiddle的链接 - > https://jsfiddle.net/k4rz5tdy/

1 个答案:

答案 0 :(得分:2)

您实际上还有一个额外的步骤,并且默认情况下background设置为repeat,它只会返回到结尾的第一帧。

.kia-jump {
    width: 320px;
    height: 464px;
    position: absolute;
    top: 1%;
    left: 41%;
    background: url('http://schoolcinema-sconline.rhcloud.com/images/activity/KiaJumpingAnimation.png') left center;
    animation: jumpAnim 1.67s steps(23) 1 forwards;
}

@keyframes jumpAnim {
    100% { background-position: -7590px; }
}

刚刚做了

  

7920 - (7920/24)= 7590

https://jsfiddle.net/RedBreast/k4rz5tdy/2/