Trigger css3 keyframes using jquery

Question

I wrote a keyframe animation:

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

I want to run this animation on a rectangle I made using the following html and query code code:

<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>

The thing is that nothing happen when I click on the button. I am not very good with jquery so that might be the problem.

Thank you very much for your help!

Matt

Answer 1

You're adding click events to both add and remove the class to the same button. The net result is that the element will be in an identical state to when it started. Try using to separate buttons to start with.

Answer 2

I found the problem. It was a query conflict problem. I used the following code and it worked.

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

</script>