我写了一个关键帧动画:
@-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,所以这可能是问题所在。
非常感谢您的帮助!
马特
最佳答案
您正在添加点击事件以将类添加和删除到同一按钮。最终结果是元素将处于与开始时相同的状态。尝试使用分隔按钮开始。
关于jquery - 使用 jquery 触发 css3 关键帧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8568623/