Css 精灵动画在开始时跳跃

我正在创建一个打开宝箱的精灵动画。我在一张“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;
}

---

这是因为您尚未设置初始背景位置，因此当动画开始时，背景图像会向上跳跃

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

---

这应该可以解决它

请在“我不能”中创建一个示例，因为sprite png保存在本地