【问题标题】:Can't stop animation on last frame无法在最后一帧停止动画
【发布时间】:2015-08-18 22:08:46
【问题描述】:

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

动画填充模式:转发;

没有结果。

下面是我正在使用的代码

.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/

【问题讨论】:

  • 全部放在动画上: jumpAnim 1.67s steps(24) 1 forwards
  • @PaoloCargnin:我认为你是对的。动画是一种速记,因此之前的设置很有可能被覆盖。
  • @PaoloCargnin 没用 :(

标签: css animation keyframe


【解决方案1】:

你实际上有一个额外的步骤,并且你的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/

【讨论】:

  • 这就像一个魅力......你是一个摇滚明星;)谢谢你的帮助......我厌倦了在“前锋”后面跑:)
猜你喜欢
  • 2016-07-11
  • 1970-01-01
  • 2013-12-14
  • 1970-01-01
  • 1970-01-01
  • 2016-01-03
相关资源
最近更新 更多