CODEWITHSUNDEEP
csssvgcss-animationsanimate.css
Maurice
Maurice

Reputation: 1157

Stop CSS3 animation jumping

I have the following fiddle (Wekbit/Chrome only).

Just watch the animation for a while and you will see it "stop" for a millisecond and then continues again. Could it be the svg file itself? If that is the case, how can I fix this file so the hiccup is gone?

HTML

<div class="tile10"></div>

CSS

@-webkit-keyframes move {
    0% {
        background-position: 6px 0;  
    }
    100% {
        background-position: 6px 80px;  
    }
}


.tile10 {
    width: 80px;
    height: 80px;
    position: absolute;
    background: url(http://www.mauricederegt.nl/loopband.svg);
    background-repeat: repeat-y;
    -webkit-animation: move 3s linear infinite;   
    z-index: -1;
}

Upvotes: 4

Views: 1738

Answers (1)

Neograph734
Neograph734

Reputation: 1754

It was indeed in the image. Your rows are about 6px heigh. 80 is not dividable by 6, so there will be a little displacement. 78 however is dividable by 6.

http://jsfiddle.net/rtS5U/5/

So instead of moving it 80px down, move it 78px down.

@-webkit-keyframes move {
    0% {
        background-position: 6px 0;  
    }
    100% {
        background-position: 6px 78px;  
    }
}

Upvotes: 4

Related Questions