Trigger css3 keyframes using jquery

问题

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

回答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.

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

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

来源：https://stackoverflow.com/questions/8568623/trigger-css3-keyframes-using-jquery

标签

jquery

css3

webkit

webkit-animation