CSS Animation (background-image position) – but Responsive?

[iknowdavehouse]

Is this possible?

I’ve made a small CSS animation by shifting the background position (on :hover for now but that’s neither here nor there…I will put in a link to trigger the hover state on a touch device later on)

The question is – I have shifted my background position in percentages, as you can see I’ve manually scaled the banner and it works…however I need to make 100% width so this will work fluidly. Therefore I need to maintain the ratio of the height…which I’ve work out at 24.68%.

I’ve tried setting the width to 100% and the height to 24.68% and it just doesn’t display anything.

Any ideas?

.ani {
margin: 0 auto;
max-width: 940px;
height: 232px;
background-image: url(StudioAnimation-Sprite.jpg);
background-size: cover;
background-position: 0px 16.7%;
}

.ani600 {
margin: 0 auto;
max-width: 600px;
height: 148px;
background-image: url(StudioAnimation-Sprite.jpg);
background-size: cover;
background-position: 0px 16.7%;
}

.ani:hover, .ani:focus, .ani600:hover, .ani600:focus {

-webkit-animation: play 1.3s steps(5) 1;
}

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

Thanks

[Paulie_D]

Could you make a Codepen…with working images?

[Paulie_D]

You could try `background-size: auto 100%;`

[iknowdavehouse]

Thanks, but because I’m animating a sprite this actually re-sizes the whole image so you can see the other frames once it gets re-sized.

I need to set the .ani div to width 100% and height 24.68% (so it maintains that ratio) and the background image to 100% with a size of cover.

However if I give the div any height other than a fixed value it just disappears.

I will set up a copepen account shortly! Thanks

[Author]

Posts