Question

我正在尝试在此处创建关键帧动画，并希望以最后一帧结束动画。但事实并非如此。

代码：

#circleAnime {
    width: 710px;
    height: 710px;
    margin: 2% auto;
    background: url('../images/sprite.png') left center no-repeat;
    -webkit-animation: play 4s steps(18) forwards; /* Number of frames we have */
    animation: play 4s steps(18) forwards;
}

@keyframes play {
    from {
        background-position: 0; 
    }
    to {
        background-position: -12780px;  /* Sprite Width */
    }
}

@-webkit-keyframes play {
    from {
        background-position: 0;
    }
    to {
        background-position: -12780px;  
    }
}

我已关注this link并将背景重复更改为不重复，但这没有帮助。

演示：

http://thejobupdates.com/pt/circleanime/

任何人都可以帮我告诉我如何在最后一帧停止它吗？

Answer 1

问题

您正在最后一帧之后停止动画，而不是停止动画。

你有一个长度为25560px的精灵图片，所以background-position: -25560px就在最后一帧之后。

解决方案

每个帧宽为710px。我们想停在最后一帧的背景位置 - 25560px - 710px = 24850px，即 - background-position: -24850px

执行此操作时，您必须从动画35而不是36中删除一个句点。

CSS

animation: play 4s steps(35) forwards;

@keyframes play {
    0% {
        background-position: 0;
    }
    100% {
        background-position: -24850px;
    }
}

<强>演示：

#circleAnime {
    width: 710px;
    height: 710px;
    margin: 2% auto;
    background: url(http://thejobupdates.com/pt/circleanime/images/sprite.png) left center;
    animation: play 4s steps(35) forwards;
}

@keyframes play {
    0% {
        background-position: 0;
    }
    100% {
        background-position: -24850px;
    }
}

<div id="circleAnime"></div>

CSS3关键帧动画：不结束并停留在最后一帧

1 个答案: