0

宝箱の開口部のスプライトアニメーションを作成しています。1つの「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 に答える