mardi 21 avril 2015

Custom End Point of CSS3 Sprite Animation (end on end of sprite img)

/sweeeeeet_image.png is my long horizontal png image, it's 5596px wide; it consists of 10 different images side by side within that .png and my CSS3 below is moving it to create an animation, next to steps(10) infinite; is possible -- I don't want that so I omitted it. But with leaving it out, it doesn't loop, but starts at the beginning of the long .png -- so stops at first image frame. I need it to stop at the last! Any suggestions at all?

.hi {
    width: 555px;
    height: 126px;
    background-image: url("sweeeeeet_image.png");

    -webkit-animation: play 1s steps(10);
       -moz-animation: play 1s steps(10);
        -ms-animation: play 1s steps(10);
         -o-animation: play 1s steps(10);
            animation: play 1s steps(10);
}

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

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

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

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

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

Aucun commentaire:

Enregistrer un commentaire