Запускать ключевые кадры css3 с помощью jquery

Question

Я написал анимацию ключевого кадра:

@-webkit-keyframes cubemove {
0% {-webkit-transform: translateZ(-194px) rotateY(0deg);}
20% {-webkit-transform: translateZ(-194px) rotateX(-180deg);}
40% {-webkit-transform: translateZ(-194px) rotateX(-90deg);}
60% {-webkit-transform: translateZ(-194px) rotateX(90deg);}
80% {-webkit-transform: translateZ(-488.5px) rotateY(90deg);}
90% {-webkit-transform: translateZ(-488.5px) rotateY(-90deg);}
100% {-webkit-animation-play-state:paused;}
}

.cubebox {
-webkit-animation: cubemove 30s ease-in-out 5s 1 normal;
}

Я хочу запустить эту анимацию в прямоугольнике, который я создал, используя следующий HTML-код и код запроса:

<figure id="box">
<img src="/images/cube/step1.jpg"/>
<img src="/images/cube/step2.jpg"/>
<img src="/images/cube/step3.jpg"/>
<img src="/images/cube/step4.jpg"/>
<img src="/images/cube/step5.jpg"/>
<img src="/images/cube/step6.jpg"/>
</figure>

<button class="commencer">Start</button>

<script type="text/javascript">
jQuery.noConflict();
$(document).ready(function(){
    $('.commencer').click(function(){
        $('#box').addClass('cubemove');
    });

    $('.commencer').click(function(){
        $(this).removeClass('cubemove');
    });
});

</script>

Дело в том, что ничего не происходит, когда я нажимаю на кнопку. Я не очень хорошо разбираюсь в jquery, так что это может быть проблемой.

Большое спасибо за помощь!

Мэтт

Answer 1

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

Answer 2

Я нашел проблему. Это была проблема конфликта запросов. Я использовал следующий код, и он работал.

<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function(){
    jQuery(".commencer").click(function(){
        jQuery("#box").addClass("cubebox");
    });
});

</script>

Answer 3

Я рекомендую вам также попробовать этот плагин jquery, который может динамически добавлять анимацию css3 к элементам и кучу дополнительных вещей: https://github.com/krazyjakee/jQuery-Keyframes