javascript - CSS3点击动画

Question

试图学习 CSS3 动画和 onclick 事件的基础知识，但我被卡住了。

我想使用按钮 id="3"来启动动画，如您在此处看到的红色方 block :https://jsfiddle.net/4swmegpn/按钮 id="4"停止/重置红色方 block 的动画。

我只是不知道从哪里开始。我已经开始将 onclick 添加到:

<button id="button1" onClick=""> > </button>

但在那之后我想不出该怎么办。从 css 文件中调用和激活“关键帧示例”的东西，但不确定如何调用。

Answer 1

您可以向元素添加和删除类以开始/结束动画。并在 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 中切换动画。有很多技巧。这完全取决于您需要实现的目标。