CSS-анимация onclick и reverse next onclick

Question

Я использую spritesheet и ключевые кадры для анимации изображения на кнопке при нажатии.

Когда кнопка нажата, я хочу, чтобы кадры выполнялись в одном направлении и оставляли кнопку на последнем изображении в спрайте, и когда она снова нажимается, я хочу, чтобы одни и те же кадры запускались назад, оставляя кнопку на первое изображение на спрайте.

В настоящее время я пытаюсь использовать jquery для изменения класса на кнопке для анимационного класса при нажатии, но это, похоже, не работает.

скрипку: 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; } 
} 

Answer 1

Убедитесь, что вы используете браузер с поддержкой анимации. Для меня это работает в Firefox.

Следующая может быть только то, что вы хотели:

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

HTML

<img src="http://s.cdpn.io/79/sprite-steps.png" /> 
<button class="hi"></button> 

CSS

.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; } 
} 

JQuery

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(); 
    }); 
}); 

Answer 2

сделать переменную-счетчик, который проверяет, если кнопка нажата или нет. И на основе значения счетчика добавить класс к элементу, например:

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

Убедитесь объявить переменную счетчика вне функции. Else каждый раз, когда его значение инициализируется значением 0.