How to create a responsive sprite sheet animation in css?


Tags: javascript,css,html5,animation,sprite

Problem :

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 ?



Solution :

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>

    CSS Howto..

    How can i increase the round corner button width dynamically depends on the text size in CSS?

    How to put div under content when resize window?

    How to position an image sprite at the bottom of an element of unknown height

    How to force text wrapping with floated elements

    How to make android app for existing dynamic website

    How does one load a CSS framework in Rails 3.1?

    CSS - how to put a opacity border to an input?

    How to select children in CSS

    Is there a CSS style guide for large existing projects. Or how could I optimize the css for a large project [closed]

    how to convert list item to slider when browser is less than 640px?

    How to get div height 100% inside td of 100%

    Showing calendar exactly below a textbox

    Why won't my SVG's show?

    how to remove the border-right for a last child in css

    CSS: How do I centre an element relative to its parent while right-aligning its sibling?

    How to set CSS position properties to none ?

    How can I define fieldset border color?

    How to display another div when clicked on a div using CSS only

    CSS: how to make margin: 0px auto work

    CSS: Background in front of image - how to prevent it?

    How to put space between figure in image?

    How to Make 4 cells in each line by only css & html

    Show popout bubble above when no space available below

    How to create a perfect 3 columns layout using CSS , with cross-browser support?

    Show Loading gif on hover

    How to make this styling with css

    How does one target IE7 and IE8 with valid CSS?

    How can I create scrollable columns in Bootstrap?

    Css: how to combine table and column specification into a single selector?

    How to set focus/active on the clicked li(tab) in angular.js