1

i've been trying to do this for hours but so far i haven't made any progress.

I have a site with a few animations in it, some will be activated on click and some on hover. something similar to the animation found in this site : http://www.pixelwrapped.com/ the cat tail is reponsive as in when you scale the broswer it scales along with it as well.

this is the code that i am using to create the animation

.monster {
            position: absolute;
            width: 100px;
            height: 100px;
            margin: 2% auto;
            background: url('img/le-cloud.png') left center;
            overflow: auto;
            display: block;
            left: 20%;
            top: 40%;

        }
        .monster:hover {
            position: absolute;
            width: 100px;
            height: 100px;
            margin: 2% auto;
            background: url('img/le-cloud.png') left center;
            animation: play .9s steps(18);
            overflow: auto;
            display: block;
            left: 20%;
            top: 40%;

        }

i found this tutorial which uses percentages, that works for changing 1 frame not playing the entire 18 frames in this example , i have other animations composed of more than 30 sprites, i looked into spritely.js but it wasn't responsive.

Any ideas how can i solve this ?

11
  • 1
    This question appears to be off-topic because it is a way better fit for Stack Overflow.
    – Vincent
    Oct 22, 2014 at 10:13
  • In your example site (pixelwarped.com), as soon as the image starts shrinking, the animated tail is hidden. Meaning that it's not really responsive animation. It would appear that they did it that way, because it would be difficult to scale the small spritesheet image in proportion with the bigger image behind it, all the while keeping the tail in the right position.
    – Joonas
    Oct 22, 2014 at 10:28
  • So media queries is the only possible solution i guess, just making 3 different sizes
    – Nour
    Oct 22, 2014 at 10:30
  • Perhaps not the only solution, but the best one that I can think of.
    – Joonas
    Oct 22, 2014 at 10:47
  • Thank you for suggestion, I did consider Gifs as well, do you have any idea about pros,cons or whether it will work at all ?
    – Nour
    Oct 22, 2014 at 11:51

2 Answers 2

1

I figured out how to do it eventually! Just in case anyone still cares, Let me do some explaning just so you don't go through what I went throught:

    <style>
      div.sprite {
            margin: 0 auto;
            width: 40%;
/*            Change this to what ever value you desire*/
            height: 0;
            padding-bottom: 40%;
            background-image: url("le-cloud-copy.png");
/*            Add the sprite sheet here, must be on a staright line*/
            background-position: 0 0;
            background-size: 1800%;
/*            I have 18 sprites in the sheet thus it's 1800%, if it was 4 you'd use 400% and so on*/
            display: block;
        }
        div.sprite:hover {
/*            background-position: 500% 0;*/
            animation: play .9s steps(18);
/*            18 steps to go over al the sprites i have, if you had 4 in the sprite the value would be 4 for example */
        }
        @keyframes play {
            100% {
                background-position: 1800% 0;
            }
        }
    </style>

And the magic bit is here include this library and this should work.

<script src="js/prefixfree.min.js"></script>
1
  • Including prefixfree for something you can do pretty easily in CSS seems like overkill :P If you are already including it for other things it might be okay, but recommending it for something this short is bad practice Mar 19, 2015 at 15:23
0

Try using transform's scale and whatever break points you need. It's supported in IE9 and above but you can be emulated in IE < 9 using Microsoft's zoom property. Others are (not easily) possible using the MS Matrix filter.

@media(max-width:1024px){
   .monster {
       transform:scale(0.5);
   }
}
4
  • Using scale for responsive design is bad practice. Mar 19, 2015 at 15:08
  • @Zach Saucier - Interestingly enough you talk about responsive and using scale in your css animation article on CSS Tricks but don't seem to mention it being bad practice. Can you elaborate on that? "Sadly, percents are not supported by any box-shadow properties so they are not as easily responsive as a native HTML element. However they can still be changed manually in an animation or by using transform:scale(n) on the actual HTML element which they are a part of."
    – Zoe
    Mar 19, 2015 at 15:17
  • @Zach Saucier - It'd be nice if srcset was actually supported by more then just web kit. I've use scale and have found no blurriness. Do you have an example? Are you stating that this happens when you resize the browser or from desktop to mobile? If its on browser resize most users (99.9%) do not resize the browser the way we do when testing.
    – Zoe
    Mar 19, 2015 at 15:38
  • Upon a bit more thinking: using scale() for images is okay as long as 1) The scale value is less than 1 (more than 1 is always blurred), 2) the image is positioned absolutely (so that the difference in bounding box and visual appearance doesn't matter), 3) performance doesn't matter much (it would be best to load a smaller image if only a smaller image is required), and 4) if it is paired with any other transforms, it needs to be heavily tested because browsers have trouble with certain types of transforms, especially when paired together Mar 19, 2015 at 17:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.