始终以全屏大小读取精灵 css？

Question

我尝试用自动全屏尺寸制作精灵动画

但我不知道如何才能始终全屏阅读此 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>

始终以全屏大小读取精灵 css？

read sprite css always in fullscreen size?

css

css-animations

sprite

css-sprites