<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title>动画暂停测试</title>
<style>
#test{
width:200px
height:200px
position:relative
background:red
animation:move 5s alternate infinite
}
@keyframes move{
0%{left:0background:red}
100%{left:600pxbackground:green}
}
</style>
<script>
function start(){
var x=document.getElementById('test')
x.style.animationPlayState="running"
}
function end(){
var y=document.getElementById('test')
y.style.animationPlayState="paused"
}
</script>
</head>
<body>
<div id="test"></div>
<button onclick="start()">开始动画</button>
<button onclick="end()">结束动画</button>
</body>
</html>
一.使用 transition 实现会用到 steps(count, position) 方法，它是一个 timing function ，会把过渡分成 count 步 position 的默认值是 end ，还可以为 start 。假如现在有一个动画分成5段， end 会在第一段的时间执行完后才到第一段的终点即第二段的起点，一次类推执行动画，当执行到最后一段时，到达不了最后一步的终点就会到回到起点重新开始执行动画；而 start 是先到第一段的终点，等第一段的时间执行完后，到达第二段的终点，以此类推，能到达最后一段的终点。
具体实现如下：
效果图：
未完待续。。。
HTML结构该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮
CSS样式
以下是该css3点击按钮特效的通用CSS样式：
插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：
上面的CSS代码可以生成如下图的动画效果：
在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。
在“Stoja”效果中使用了CSS clip-path属性，这个效果也需要浏览器的支持才能看得到的。
