css - Sprite 动画一开始就跳

Question

我正在创建宝箱打开的 Sprite 动画。我在一张“png”格式的图片上制作了 7 个并排放置的舞台。它适用于以下代码，但由于某种原因，在动画开始时图像会跳起来。我认为这是图像的问题，第一阶段可能比其他阶段低一点。事实并非如此，所以我不知道问题出在哪里。谁能告诉我问题出在哪里？

body {
text-align: center;
}

@-webkit-keyframes wink {
    from { background-position: 0px; }
    to { background-position: -3600px; }
}

@-moz-keyframes wink {
    from { background-position: 0px; }
    to { background-position: -3600px; } 
}

@keyframes wink {
    from { background-position: 0px; }
    to { background-position: -3600px; }
}


.chest {
    background-image: url("file://///FILESERVER/scratch/Sean/sprite2.png");
    height: 600px;
    margin: 0 auto;
    width: 550px;
}

.chest:hover {    
    -webkit-animation: wink 2.5s steps(6, end) 1 forwards;
    -moz-animation: wink 2.5s steps(6, end) 1 forwards;
    animation: wink 2.5s steps(6, end) 1 forwards;
}

Answer 1

这是因为你没有设置初始背景位置，所以当动画开始时，背景图像会跳起来。

.chest {
    background-image: url("file://///FILESERVER/scratch/Sean/sprite2.png");
background-position: 0 0;
    height: 600px;
    margin: 0 auto;
    width: 550px;
}

这应该可以解决