css - 总是以全屏尺寸读取 Sprite CSS？

Question

我尝试使用自动全屏尺寸制作 Sprite 动画

但我不知道如何才能始终以全屏方式读取此 Sprite (即屏幕宽度和高度的 100%，并在调整大小时自动适应)

有自动调整 Sprite 大小的想法吗？

@-moz-keyframes play {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@-webkit-keyframes play {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
@keyframes play {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}

#loader
{
  position: fixed;
  z-index: 999999999999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
  background-size: 1100% 100%;
  background-repeat: no-repeat;
  -webkit-animation: play 2s infinite steps(11);
  -moz-animation: play 2s infinite steps(11);
  -o-animation: play 2s infinite steps(11);
  animation: play 2s infinite steps(11);
}

<div id="loader"></div>

Answer 1

你就快到了!
应该有 steps(10) 因为起始位置实际上不是一步。

顺便说一句，z-index:999999999999对我来说看起来很偏执 =))。

@keyframes play {
  100% {
    background-position: 100%;
  }
}

#loader
{
  position: absolute;
  z-index: 9;
  top: 0; right:0;
  bottom:0; left: 0;
  background-position: 0 0;
  background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
  background-size: 1100% 100%;
  background-repeat: no-repeat;
  animation: play 1s infinite steps(10);
}

<div id="loader"></div>

更新
问题奖励:

@keyframes play {
  99.99% {
    background-position: 120%;
    background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
  }
  100% {
    background-image: none;
    z-index: -1;
  }
  
}

#loader {
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-position: 0 0;
  background-image: url(https://image.ibb.co/hCqoYz/preloader_bg_bw2.png);
  background-size: 1100% 100%;
  background-repeat: no-repeat;
  animation: play 2s steps(12) forwards;
}

body {
  background: url(https://picsum.photos/640/480) 50% 50% /cover

<div id="loader"></div>