Animation Reverses at Smaller Screen Size

HTML & CSS
1

Okay, so, yes I totally know that this site is a little rinky-dink. But this is just a little site for a little honey stand at a little farmers’ market. So I’m okay with it being rinky-dink, and so are the honey stand people. The issue I’m having with it is that I have some animated bees at the bottom of the page and they properly go from right-to-left across the screen… that is until the screen gets down to a certain size (approximately phone size) and then they incorrectly go from left-to-right. Does anyone know why that would be? It almost seems like other sites would be having a similar problem. And it must be hard to code animations to work at all different viewpoint dimensions.

http://beeladieshoney.com/

2

Hi,

I suppose you could just the background -position on smaller screens.

e.g.

@keyframes scroll {
  from { background-position: 150% calc(100% - 25px), right bottom, right; }
  50% { background-position: -50% calc(100% - 25px), right bottom, right; }
  to { background-position: -250% calc(100% - 25px), right bottom, right; }
}

@media screen and (max-width:740px){
	@keyframes scroll {
  from { background-position: 740px calc(100% - 25px), right bottom, right; }
  50% { background-position: 380px calc(100% - 25px), right bottom, right; }
  to { background-position: 0 calc(100% - 25px), right bottom, right; }
	}
}

@media screen and (max-width:600px){
	@keyframes scroll {
  from { background-position: 600px calc(100% - 25px), right bottom, right; }
  50% { background-position: 300px calc(100% - 25px), right bottom, right; }
  to { background-position: 0 calc(100% - 25px), right bottom, right; }
	}
}

You seem to have commented out the webkit rules so you would need to re-instate them and add the duplicates for the above etc.

3

Thanks.

I think I commented out the webkit rules because when I put the animation in it was either not working correctly or not working at all in webkit browsers. Maybe it’s time to check again.

That funny media query closing comment comes from some site that was mentioning all sorts of media queries that a site could potentially use. I just copied their coding convention without thinking about the comment much (or they may have mentioned a reason for it). While it’s not something I would come up with it it does appear to me to be a complete and correct CSS comment and I don’t think the extra slash inside will hurt anything. But I am open to removing said comments altogether and/or finding out more about how they might be harmful.

4

Sorry, that was my editor flagging it as an error with its highlighting when it wasn’t an error at all. It just looks odd but is ok :smile: (I’ve removed my comment in case it confused anyone else)

I see you haven’t tried my code out yet as the bees are still travelling backwards :slight_smile:

5

Initial testing (so far comprised of a quick check in Chrome Canary) seems to work. Thanks!

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.