试图学习 CSS3 动画和 onclick 事件的基础知识,但我被卡住了。
我想使用按钮 id="3"来启动动画,如您在此处看到的红色方 block :https://jsfiddle.net/4swmegpn/ 按钮 id="4"停止/重置红色方 block 的动画。
我只是不知道从哪里开始。我已经开始将 onclick 添加到:
<button id="button1" onClick=""> > </button>
但在那之后我想不出该怎么办。从 css 文件中调用和激活“关键帧示例”的东西,但不确定如何调用。
最佳答案
您可以向元素添加和删除类以开始/结束动画。并在 CSS 中为该类添加动画(参见 fiddle )。 另外,最好不要在 HTML 中包含任何 javascript 代码(比如你的 onclick),而是在脚本中添加事件监听器:
document.getElementById('startAnim').addEventListener('click', function() {
document.getElementById('red').classList.add('animate');
});
document.getElementById('stopAnim').addEventListener('click', function() {
document.getElementById('red').classList.remove('animate');
});
您还可以使用复选框、悬停状态或其他选择器在 CSS 中切换动画。 有很多技巧。这完全取决于您需要实现的目标。
关于javascript - CSS3点击动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29876733/