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

Quasijudicial

Answer 1

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>

Quasijudicial

Answer 2

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.

Underpart

@Quasijudicial Also, you've defined a class cubebox, but you're adding the class cubemove. – Underpart

I saw, i made a mistake when copying it. – Quasijudicial

Answer 3

I recommend you also try this jquery plugin which can dynamically add css3 animations to elements and a bunch of extra stuffs: https://github.com/krazyjakee/jQuery-Keyframes

Hydrolyte