read sprite css always in fullscreen size?

问题

I try to animate a sprite with auto fullscreen size

but I don't know how can I do to read this sprite always in fullscreen (i.e. 100% of width and height of screen, and auto adapte if resizing)

any idea to autosize 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>

回答1:

You're almost there!
There should be steps(10) as the start position is not a step actually.

BTW, z-index: 999999999999 looks paranoid to me =)).

@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>

Update
Question bonus:

@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>

来源：https://stackoverflow.com/questions/51663619/read-sprite-css-always-in-fullscreen-size

标签

css

css-animations

sprite

css-sprites