.toShop-btn{
position: fixed
top:730rpx
width: 81rpx
height:91rpx
line-height: 48px
z-index:99
right:0rpx
-moz-animation: myfirst 1s infinite
-webkit-animation: myfirst 1s infinite
-o-animation: myfirst 1s infinite
animation: myfirst 1s infinite
}
@keyframes myfirst{
0% { transform: scale(.8)}
50% { transform: scale(1)}
100% { transform: scale(.8)}
}
这个只用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的动画时间，你可以根据情况作出适当的时间调整。
<style type="text/css">.font{font-size:12px}
.a{font-size:14px}
.b{font-size:16px}
.c{font-size:18px}
.d{font-size:20px}
//这里是最不好的表现形式，可以利用js里面的动画函数来执行并循环
}
</style>
<div class="font">我这是测试</div>
<div class="a">我这是测试</div>
<div class="b">我这是测试</div>
<div class="c">我这是测试</div>
<div class="d">我这是测试</div>
