单击网页上的按钮时如何制作html5动画？答案

【问题标题】：How do I make an html5 animation when a button is clicked on a webpage?单击网页上的按钮时如何制作html5动画？
【发布时间】：2011-09-24 19:33:54
【问题描述】：

我想在 html5 中创建一个交互式动画。我想要一个足球场，上面有球衣，像 4-4-2 这样的阵型，并且在侧面有不同的选项来改变阵型，比如说 4-5-1，然后当点击这个按钮时显示 4 -5-1 球衣将在场上重新排列成该形状。关于我如何做到这一点的任何想法？

提前致谢

【问题讨论】：

【解决方案1】：

最简单且最无依赖的方法是将 JavaScript 函数添加到按钮或元素的 onClick 属性，然后让 JavaScript 通过编辑玩家的位置来移动他们、属性等。

但是，我建议使用 jQuery，因为它通常更容易。然后，您将一个操作绑定到按钮的 id（您的 id="..." 属性）。例如：

$(document).ready(function() {
  $("mybuttonid").click(function(event){
    ...
  });
});

【讨论】：

【解决方案2】：

http://jsfiddle.net/rlemon/3YRzS/

如前所述，jquery 和 animate。

【讨论】：

【解决方案3】：

在某些具有 CSS3 关键帧动画的浏览器上可能是可能的，如在 smasing 杂志的网站上所见，例如 - http://coding.smashingmagazine.com/2011/05/17/an-introduction-to-css3-keyframe-animations/

【讨论】：