CODEWITHSUNDEEP
csscss-animationscss-sprites
Alex Weyland
Alex Weyland

Reputation: 177

CSS sprite animation timing issues

I can't seem to get the animation timing right on this

http://codepen.io/anon/pen/ZYMgqE

.spinner {
          width: 36px;
          height: 36px;
          background: url('http://i.imgur.com/CYiaWsF.png') top center;
          animation: play 1s steps(10) infinite;
        }

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

I have tried numerous combinations, but it always comes out looking like a film reel.

Am I doing something wrong? Did I misunderstand CSS sprite animations?

Upvotes: 0

Views: 77

Answers (1)

Paulie_D
Paulie_D

Reputation: 115046

Your math is off..I think.

The image is, apparently, 2844 px tall...so the number of steps should be the height divided by the element height

2844 / 36 = 79

.spinner {
  width: 36px;
  height: 36px;
  background: url('http://i.imgur.com/CYiaWsF.png') top center;
  -webkit-animation: play 1s steps(79) infinite;
  animation: play 1s steps(79) infinite;
}
@-webkit-keyframes play {
  100% {
    background-position: 0px -2844px;
  }
}
@keyframes play {
  100% {
    background-position: 0px -2844px;
  }
}
<div class="spinner"></div>

Upvotes: 3

Related Questions