0

I've tried the "-webkit-animation-fill-mode: forwards;" but I can't seem to make it work, it just getting paused on the first frame, can someone help me out?

JS FIDDLE

<div class="logo"></div>

.logo {
    width: 328px;
    height: 187px;
    background-image: url("http://u.cubeupload.com/amitkilo/opti.png");
    -webkit-animation: play 2.0s steps(60);
       -moz-animation: play 2.0s steps(60);
        -ms-animation: play 2.0s steps(60);
         -o-animation: play 2.0s steps(60);
            animation: play 2.0s steps(60);
}

@-webkit-keyframes play {
   from { background-position: 0px 0px; }
     to { background-position: 0px -11220px; }
}

@-moz-keyframes play {
   from { background-position: 0px 0px; }
     to { background-position: 0px -11220px; }
}

@-ms-keyframes play {
   from { background-position: 0px 0px; }
     to { background-position: 0px -11220px; }
}

@-o-keyframes play {
   from { background-position: 0px 0px; }
     to { background-position: 0px -11220px; }
}

@keyframes play {
   from { background-position: 0px 0px; }
     to { background-position: 0px -11220px; }
}
JasonMArcher
  • 14,195
  • 22
  • 56
  • 52

1 Answers1

2

I think you have the numbers slighly off. If you reduce the steps by one and the final bg position accordingly...it all works.

I think this question may be related.

.logo {
    width: 328px;
    height: 187px;
    background-image: url("http://u.cubeupload.com/amitkilo/opti.png");
    background-repeat: no-repeat;
    animation: play 2.0s steps(59);
    -webkit-animation-fill-mode: forwards;
}
@keyframes play {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 0px -11033px;
    }
}
<div class="logo"></div>
Community
  • 1
  • 1
Paulie_D
  • 107,962
  • 13
  • 142
  • 161
  • Yes. The step number is 1 less than the images number – vals May 18 '15 at 16:19
  • If your animation's last position is -500px and number of steps 5 and you want to stop the animation on the last frame that set instead of 500px - 400px and 4 steps instead of 5 – Aleksandra Chuprova Sep 27 '16 at 07:18