2

スプライト シートの背景位置を移動するには、キーフレーム アニメーションを使用する必要があります。ただし、アニメーションは必要ありません。gif に似た、ハードなフレームごとの外観が必要です。

これを達成する方法はありますか？

本当にありがとう！

4

3 に答える 3

5

キーは CSS タイミング関数です。ストップモーションフレームは、ステップ機能に対応しています。

animation-timing-function: steps(n);

コード例: css ストップモーション アニメーション

デモ

于 2013-10-23T13:47:33.430 に答える
2

はい。ただし、JavaScript を使用すると、これをより美しく実現できます。

@-webkit-keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}

@-moz-keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}

@-o-keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}

@keyframes sprite {
  0%    { background-position: 0px 0px; }
  25%   { background-position: 0px 0px; }
  25.1% { background-position: -200px 0px; }
  50%   { background-position: -200px 0px; }
  50.1% { background-position: -400px 0px; }
  75%   { background-position: -400px 0px; }
  75.1% { background-position: -400px -200px; }
  99.9% { background-position: -400px -200px; }
  100%  { background-position: 0px 0px; }
}
    
div.image {
  background: url('https://i.stack.imgur.com/lwOaY.jpg');
  width: 200px;
  height: 200px;
  -webkit-animation: 5s sprite infinite;
  -moz-animation: 5s sprite infinite;
  -o-animation: 5s sprite infinite;
  animation: 5s sprite infinite;
}
<div class='image'></div>

于 2013-05-09T14:05:53.783 に答える
1

本当にキーフレーム アニメーションのみを使用する必要がある場合、頭に浮かんだ 1 つのアイデアは次のようにすることです。

@keyframes youranim {
    0%     { top: 0px;   }
    24.99% { top: 0px;   }
    25%    { top: 200px; }
    49.99% { top: 200px; }
    50%    { top: 400px; }
    74.99% { top: 400px; }
    75%    { top: 600px; } /* and so on... */
}

CSS3 キーフレームでは 10 進数値は問題ないと読みました。

于 2013-05-09T14:00:18.687 に答える