Sprite 動畫範例

Sprite 影格動畫範例

以下解說使用css animation-timing-function: steps 可製作出影格動圖

範例: 2影格

原始圖 (400x200px)

作成動圖 (200x200px)

css

.sticker-ani-2steps{
  animation-iteration-count: infinite;
  animation-duration: 1s;
  background-size: 400px 200px;
  animation-timing-function: steps(2,end);
  animation-name: stickerAniSteps2;
}
@keyframes stickerAniSteps2
{
  0% { background-position: 0px center; }
  100% { background-position: -400px center; }
}

範例: 4影格

原始圖 (800x200px)

作成動圖 (200x200px)

css

.sticker-ani-4steps{
  animation-iteration-count: infinite;
  animation-duration: 2s;
  background-size: 800px 200px;
  animation-timing-function: steps(4,end);
  animation-name: stickerAniSteps4;
}
@keyframes stickerAniSteps2
{
  0% { background-position: 0px center; }
  100% { background-position: -800px center; }
}

(若 css animation-timing-function: 不是steps, 則會做出其他效果)

原始圖

animation-timing-function: linear;

css

.sticker-ani-linear{
  animation-iteration-count: infinite;
  animation-duration: 1s;
  background-size: 400px 200px;
  animation-timing-function: linear;
  animation-name: stickerAniSteps2;
}