Question

I am playing css3 animation with sprite image which contain 23 frame. I want it to play one round only and stops it at the last frame. But unfortunately it hiding after complete one compete round. Can anyone please help me?

.animation-door{
    background-image: url(../images/sprite-animation-1.png);
    width: 545px;
    height:660px;
    background-size:12535px auto;
    background-repeat:no-repeat;
    animation: doorOpen 7.5s steps(23) forwards 1;
    -webkit-animation: doorOpen 7.5s steps(23) forwards 1;
}


@-webkit-keyframes doorOpen {
    from { background-position:  0px; }
    to { background-position: -12535px; }
}
@keyframes doorOpen {
    from { background-position: 0px; }
    to { background-position: -12535px; }
}

Answer 1

我想你可能想要这样跑：

| |             =>           | |     what you see
-----------          -----------     background

但事实上你确实喜欢这样：

| |             =>              | |     what you see
-----------          -----------        background

也许您可以尝试将其移至background-position: -11990px

how CSS3 sprite animation will stops at last frame

1 个答案: