CSS3 onclick动画

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

我想用button id =“3”开始动画，红色方块如你所见：https://jsfiddle.net/4swmegpn/ 并按钮id =“4”来停止/重置红色方块的动画。

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

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

但之后，我不能想出做什么。可以调用并激活css文件中的“关键帧示例”，但不知道如何去做。

来源

2015-04-26 Michael

“我已经开始添加onclick”和“只有CSS请不要JS或Jquery”。您无法使用'

哦，那我该如何切换动画呢？ – Michael

如果我使用javascript。我该如何继续？ – Michael

您可以向元素添加和删除类以开始/结束动画。并在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内的动画。有很多技巧。这完全取决于你需要达到什么。

来源

2015-04-26 11:48:14 Tigran

感谢您的回答。我在上面的评论中也输入了它，我尝试了你的两个代码，但是当我点击时没有任何反应。我需要Apache来在本地主机上运行JavaScript吗？ – Michael

不客气。你不需要输入任何内容。只需按照小提琴链接。我编辑了代码。如果您想通过HTTP为您的页面提供服务，则无论您是否在页面中使用JavaScript，都需要Apache。您也可以通过“file：//”方案打开html文档。即只需双击文件浏览器中的html文件，就应该在默认的Web浏览器中打开它。 – Tigran

你能再次帮助我吗？:) 现在我试图旋转蓝色方块，只要你点击“>”键。但我无法让它移动。我使用与红色方块一样的原理。这里是小提琴：https：//jsfiddle.net/arkt3huv/ – Michael

以下是一些我们开始谈论动画

你并不需要键入doctype，也head，并body标签，因为的jsfiddle平台为你做它。
这是逃避<和>与<和>，因为他们可以打破你的HTML代码很好的做法。
对于CSS3的东西，如动画，它是使用供应商前缀很好的做法，这是浏览器特定的前缀，将使您正在寻找在该浏览器的行为。目前有：
1. 铬& Safari浏览器：-webkit-
2. 火狐：-moz-
3. 歌剧：-O-
4. Internet Explorer中：-ms-

这是一个很好的做法，为最后留下未加前缀的CSS3代码，因为它会覆盖所有浏览器特定的东西。因此，这里是你的关键帧应该是什么样子的例子：

@-webkit-keyframes tutsFade { /* your style */ } 
@-moz-keyframes tutsFade { /* your style */ } 
@-ms-keyframes tutsFade { /* your style */ } 
@-o-keyframes tutsFade { /* your style */ } 
@keyframes tutsFade { /* your style */ }

现在的动画部分 - 我在这里创造的示例的简化版本 - https://jsfiddle.net/a1d1Lk6f/ 什么是新是.exampleAnimation类包含您需要的所有元素，以便使用CSS文件底部定义的动画example开始动画。您可以将此类直接添加到HTML元素或控制它形成JavaScript以启动/停止动画。

这里是初学者的一些基本教程：Introduction to CSS Animation,Control CSS3 Animations With jQuery。

来源

2015-04-26 11:59:16

感谢您的回答！现在，我需要apache来查看运行javascript还是？因为它在Im测试时不起作用。编辑：当我通过Dreamweaver测试代码时* – Michael

您可以在本地保存页面并在浏览器中运行它，但我认为您不能在Dreamweaver设计器视图中运行它。您还可以在浏览器的“开发工具”中查看控制台选项卡是否有任何错误。您也可以通过初学者指南了解一下stackoverflow，并熟悉它是如何工作的。 –

CSS3 onclick动画

回答

相关问题