Question

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

这应该解决它

精灵动画在开头跳转

1 个答案: