Html CSS关键帧动画完成后消失
我的动画在完成动画后会一直消失。我已经跟随其他问题的答案,但仍然没有帮助。我的CSS如下:Html CSS关键帧动画完成后消失,html,css,css-animations,keyframe,Html,Css,Css Animations,Keyframe,我的动画在完成动画后会一直消失。我已经跟随其他问题的答案,但仍然没有帮助。我的CSS如下: .upvote-object { width: 50px; height: 62.5px; background: url('/icons/upvote.png') left center no-repeat; background-size: 50px 62.5px; &.upvoted {
.upvote-object {
width: 50px;
height: 62.5px;
background: url('/icons/upvote.png') left center no-repeat;
background-size: 50px 62.5px;
&.upvoted {
background: url('/icons/upvoted.png') left center no-repeat;
background-size: 50px 62.5px !important;
}
}
.ani-upvote {
background: url('/icons/upvote-sprite.png') left center no-repeat;
background-size: 1700px 62.5px;
animation: play 3s steps(34);
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 1;
}
@keyframes play {
100% {
background-position: -1700px;
opacity: 1;
}
}
@-webkit-keyframes play {
100% {
background-position: -1700px;
opacity: 1;
}
}
我在HTML中这样调用它:
<div class="upvote-object ani-upvote"></div>
问题是:
更新:请注意,动画也必须停留在最后一帧!(绿色)我让它工作了。但我不是CSS专家。所以我很抱歉不能解释为什么它会起作用。也许你知道为什么:) 更新
我让它工作了。我认为这与精灵和它停止动画的位置有关。。。如果这有意义的话。请添加工作片段或JSFIDLE?@RhapX kk刚刚添加了一个具有相同功能的FIDLEissue@JLF啊,我明白了。。。我看看我能做些什么把它固定在小提琴上。不幸的是,这与问题无关,因为我必须将直接远程链接添加到fiddle以使其正确链接。它在实际设置中工作。这也是开始图标,它应该停留在另一个类的最后一帧
.ani upvote
.Bingo!谢谢你的帮助@JLF没问题,尝试解决它很有趣:)
.upvote-object {
width: 50px;
height: 62.5px;
background: url('http://sstaging-parts.herokuapp.com/icons/upvote.png') left center no-repeat;
background-size: 50px 62.5px;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 1;
}
.ani-upvote {
background: url('http://staging-parts.herokuapp.com/icons/upvote-sprite.png') left center no-repeat;
background-size: 1700px 62.5px;
animation: play 2s steps(33); // changed the steps to 33
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
opacity: 1;
}
@keyframes play {
100% { background-position: -1650px; opacity: 1; }
}
@-webkit-keyframes play {
100% { background-position: -1650px; opacity: 1; } // Changed the position to -1650
}