Skeuomorphic switch CSS3 sprite animation only works half the time

Question

My sprite animation works perfectly on the odd clicks (1, 3, 5 . .) which puts the switch in the down position, but I can't get the even clicks(2, 4, 6. . .) to fire the animation that puts the switch in the up position. Cross browser CSS removed from the post but is in the Fiddle.

http://jsfiddle.net/aNsHU/8/

HTML

<div class="switch s-up"></div>

jQuery

$(document).ready(function() {

  $(".switch").click(function () {
    $(this).toggleClass("s-down s-up");
  });

})

CSS

.switch{
  background: transparent url(http://i.imgur.com/taIR0.jpg);
  height:65px;
  width: 75px;
  margin-bottom:75px;
  cursor:pointer;
}
.s-down{
  animation: play .4s steps(5);
}
.s-up{
  animation: reverse .4s steps(5);
}
.switch.s-down{
  background: transparent url(http://i.imgur.com/taIR0.jpg) -300px 0;
}


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

@keyframes reverse {
   0% { background-position:   -375px; }
   100% { background-position: 0px; }
}

Why do you use a `div`? Why not use a `button` (or at least ARIA roles)? A `button` is made to be clicked, as are input type submit, image and button and links; a `div` isn't — FelipeAls, Dec 23 '12 at 19:50
Yes, I could use a button instead of a div, but your comment has no relevance to my question. Switching that out would not make the animation work differently. — coreballs, Dec 23 '12 at 20:44
I wasn't answering your question but commenting about your code. That's why I used the comment part under a SO question and not the "Your answer" part. — FelipeAls, Dec 24 '12 at 17:25

score 0 · Accepted Answer · answered Jan 12 '13 at 20:09

I reached out to the person that inspired the initial code to help me solve the problem. The s-up class needs to contain both the play and reverse animations. Thanks http://simurai.com/.

.s-up{
  animation: play reverse .4s steps(5);
}

The fiddle:

http://jsfiddle.net/simurai/hEfpt/

Skeuomorphic switch CSS3 sprite animation only works half the time

1 Answers1