Animated responsive Css sprite

Question

I'm trying to make an animated css sprite responsive. I have a div which background's an image loaded from a stylesheet and it changes each 0.5 seconds so it "moves". The thing is that i would like to, dynamically, change the size of this div (and its backgorund) if the browser is resized. I've tried lots of solutions i've read here, but anything works.

What i have right now is

**HTML**

<div class="atomic"></div>

**CSS**

.atomic {
  position: absolute;
  width: 628px;
  height: 231px;
  background-image: url("../img/atomic.png");
}

.blinking-atomic {
    -webkit-animation: blinking-atomic steps(4) 3s infinite;
    animation: blinking-atomic steps(4) 3s infinite;
}

@-webkit-keyframes blinking-atomic {
  from {
    background-position: 0 -231px;

  }
  to {
    background-position: 133.4% -231px;
  }
}

**JSON** (i'm using angular so i load some values from a json file to my css) 

 "class": "atomic blinking-atomic",
      "colocar" :
      {
        "fondo_height" : 1920,
        "fondo_width" : 1020,
        "left": 25,
        "top": 17,
        "width": 628,
        "height": 231,
        "z-index":99 

      }

I've tried many solutions and none worked. I even read that is not possible to make animated css sprites responsive. Any idea? Should i forget doing it dynamically and create the standard "@media" tags in my css?

TY

I would say it can be done, all of your background images would have to be the same size, and the aspect ratio of your div would need to remain the same at all screen sizes. You could then set the background-size of the div to contain (http://tympanus.net/codrops/css_reference/background-size/) and use percentages entirely for background-position — James King, Feb 17 '15 at 15:22
The solution from @EdouardKombo at http://stackoverflow.com/questions/21810262/responsive-sprites-percentages worked for me. You need to change anything that says x%. — BlackMagic, Apr 20 '15 at 13:24

Persijn · Answer 1 · 2015-02-18T00:39:38.067

0

Animtion (tested in chrome and firefox)

Animation can be done with css. Its just a bit tricky to get all the propertys right.

    -webkit-animation-timing-function: steps(1, end);
    -moz-animation-timing-function: steps(1, end);
    -ms-animation-timing-function: steps(1, end);
    -o-animation-timing-function: steps(1, end);
    animation-timing-function: steps(1, end);

For instant spead of the sprites.

(This solution is not responsive)

edited Feb 18 '15 at 00:39

answered Feb 17 '15 at 16:08

Persijn

14,624
3
43
72

Since im using an svg file its fully possible to make the image responsive. Its just really hard. – Persijn Feb 18 '15 at 00:43

Animated responsive Css sprite

1 Answers1