CSS3密钥帧动画:不结束并留在最后一帧

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;  
    }
}

我遵循此链接，并将背景重复重复为无重复，但这无济于事。

演示：

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>