例如：
.menu{
font-size: 10px
/*字体大小*/
white-space:nowrap
/*文字内容不换行*/
width:50px
/*设置容器宽度*/
color: #fff
text-shadow: #000000 0 0 0
position: absolute
right: 8px
top: 10px
background-color: rgba(0,0,0,.3)
border: 1px solid rgba(0,0,0,.8)
border-radius: 4px
-webkit-box-shadow: rgba(255,255,255,.2) 0px 1px 0px, inset rgba(255,255,255,.2) 0px 1px 0px
box-shadow: rgba(255,255,255,.2) 0px 1px 0px, inset rgba(255,255,255,.2) 0px 1px 0px
font-weight: bold
}
css文件中添加以下内容：.mybutton{
width:100px
height:100px
........
}
然后再用到button的时候的给button加上CssClass="mybutton"就可以了
这个只用css不能完全实现，的配合js的定时器来完成，下面是代码：
<!DOCTYPE html><html>
<head>
<title>HTML5</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<style type="text/css">
img{width: 200px}
.div1{width: 200pxheight: 200pxborder:1px solid #000margin: 150px auto}
.animate1{
-webkit-animation: move1 2s infinite
}
.animate2{
-webkit-animation: move2 1s infinite
}
@-webkit-keyframes move1{
0%{
-webkit-transform:scale(1)
}
100%{
-webkit-transform:scale(1.5)
}
}
@-webkit-keyframes move2{
0%{
-webkit-transform: rotateZ(0deg) scale(1.5)
-webkit-transform:
}
100%{
-webkit-transform: rotateZ(360deg) scale(1.5)
}
}
</style>
</head>
<body>
<div class="div1 animate2"></div>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.querySelector(".div1")
oDiv.className="div1 animate1"
setTimeout(function(){
oDiv.className="div1 animate2"
},2000)
}
</script>
</body>
</html>
原理是：当animate1执行完后，把这个class去掉，换成animate2。其中animate1的执行时间，刚好是js定时器的时间。
当然这里有个问题，js定时的时间不一定会非常的吻合css的动画时间，你可以根据情况作出适当的时间调整。
