CSS animation onclick and reverse next onclick

问题

I am using a spritesheet and keyframes to animate the image on a button when it is clicked.

When the button is clicked I want the frames to run in one direction and leave the button on the last image in the spritesheet, and when it is clicked again I want the same frames to run backwards, leaving the button on the first image on the spritesheet.

I am currently trying to use jquery to change the class on the button to an animating class when it is clicked, but this doesn't seem to be working.

fiddle: http://jsfiddle.net/CGmCe/10295/

JS:

function animate(){
    $('.hi').addClass('animate-hi');
}

CSS:

.hi {
width: 50px;
height: 72px;
background-image: url("http://s.cdpn.io/79/sprite-steps.png");
}

.animate-hi {
    animation: play 2s steps(10);
}

@keyframes play {
   from { background-position:    0px; }
     to { background-position: -500px; }
}

回答1:

Make sure you are using an animation-capable browser. For me this works in Firefox.

The following might be just what you wanted:

http://jsfiddle.net/CGmCe/10299/

Code:

function animateButton() {
  var button = $('.hi');
  if (button.hasClass('animate-hi')) {
    button.removeClass('animate-hi').addClass('animate-hi-reverse');
  } else if (button.hasClass('animate-hi-reverse')) {
    button.removeClass('animate-hi-reverse').addClass('animate-hi');
  } else {
    button.addClass('animate-hi');
  }
};
$(document).ready(function() {
  $('.hi').on("click", function() {
    animateButton();
  });
});

.hi {
  width: 50px;
  height: 72px;
  background-image: url("http://s.cdpn.io/79/sprite-steps.png");
}

.animate-hi {
  animation: play 2s steps(10);
}

.animate-hi-reverse {
  animation: play-reverse 2s steps(10);
}

@keyframes play {
  from {
    background-position: 0px;
  }
  to {
    background-position: -500px;
  }
}

@keyframes play-reverse {
  from {
    background-position: -500px;
  }
  to {
    background-position: 0px;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://s.cdpn.io/79/sprite-steps.png" />
<button class="hi" type="button"></button>

回答2:

Make a counter variable which checks if the button is clicked or not. And based on the counter value add class to the element for example:

 var counter=0;
 $('.btn').on('click',function(){
  if(counter=0)
   {
     $('.hi').addClass('animate-hi');
     counter = 1;
   }
  else
   {
        counter = 0;
       $('.hi').removeClass('animate-hi');
   }
 });

Make sure to declare the counter variable outside the function. Else every time its value initialized to 0.

来源：https://stackoverflow.com/questions/27962653/css-animation-onclick-and-reverse-next-onclick

标签

css

css-animations