CODEWITHSUNDEEP
csssprite-sheet
MoLow
MoLow

Reputation: 3084

css animation Spritesheet responsive issue

I have a animation sprite-sheet which works perfectly fine when it's dimensions are set with pixels,

but when the dimensions are set, either in percents or in vh it stopps working. anyone faced this issue?

http://jsfiddle.net/qya15v3v/1/

.responsive, .static{
    border:1px solid red;
    display: inline-block;
    width:220px;
    height:220px;
    background-size: auto 100%;
}
.responsive{
    width:25vh;
    height:25vh;
}

Upvotes: 1

Views: 205

Answers (2)

Ivin Raj
Ivin Raj

Reputation: 3429

Plz try this one:

Demo

@keyframes flag {
    from {background-position: 0 top;}
    to {background-position: 800% top;}
}

Upvotes: 1

Pete
Pete

Reputation: 58422

You can solve this by using the following

@keyframes flag {
    from {background-position: 0 top;}
    to {background-position: 800% top;} /*this is the number of steps multiplied by 100%*/
}

Updated fiddle

You will notice I have changed the percentage square so that it remains a square (use padding instead of height)

Upvotes: 1

Related Questions