点击播放 css3 动画

有属性控制的把：

animation-iteration-count

动画播放的次数，与transition不同，animation可以设置循环次数，如果想无限循环可以设置infinite。

希望能帮到你！

首先这个问题是一个web开发方面的专业性问题。我们抛开这个专业性，从题目中我们要弄清两个名词，什么是css，什么是动画

css：CascadingStyleSheets（层叠样式表），是一种用来表现HTML或XML等文件样式的计算机语言，在程序员眼中，甚至称不上是语言。

动画：采用逐帧拍摄对象并连续播放而形成运动的影像技术，计算机中的动画也是如此，逐帧播放，每一帧有个元素形态，然后组合起来。

理解了上面的概念，我们再去谈谈用css制作动画，css3之前的版本是不可能用纯css制作动画，需要配合js一起才能制作，通过js控制元素每帧的形态，直到css3这个版本出来，才有纯css3制作一些常见的简单的动画，其中有3个动画属性：变形(transform)、转换(transition)和动画(animation)，具体教程网上比较多，内容解说代码也比较多，这里省略，

下面说一下制作动画的步骤：一：自己要清楚自己所要做的动画的一个整体形态，首先就是要建模二：拆分动画形态，就是每帧的形态，或者是一个时长动画的开始和结束形态，中间过程的变化形态。三：通过css动画属性进行编码出这些形态。如果是复杂的，用css配合js编写出来即可。

HTML结构

该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮

CSS样式

以下是该css3点击按钮特效的通用CSS样式：

插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：

上面的CSS代码可以生成如下图的动画效果：

在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。

在“Stoja”效果中使用了CSS clip-path属性，这个效果也需要浏览器的支持才能看得到的。

---