0

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

1 回答 1

1

这是因为您没有设置初始背景位置，所以当动画开始时，背景图像会向上跳跃。

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

这应该解决它

于 2013-01-29T08:43:27.517 回答