一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
这个只用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的动画时间，你可以根据情况作出适当的时间调整。
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。代码如下：可以复制运行下试试：
<html>
<head>
<style>
body {
background:#ddd
}
.keleyi {
width: 220px
height: 220px
margin: 0 auto
background: no-repeat url("http://keleyi.com/image/a/q5l1xnmf.jpg") left top
-webkit-background-size: 220px 220px
-moz-background-size: 220px 220px
background-size: 220px 220px
-webkit-border-radius: 110px
border-radius: 110px
-webkit-transition: -webkit-transform 2s ease-out
-moz-transition: -moz-transform 2s ease-out
-o-transition: -o-transform 2s ease-out
-ms-transition: -ms-transform 2s ease-out
}
.keleyi:hover {
-webkit-transform: rotateZ(360deg)
-moz-transform: rotateZ(360deg)
-o-transform: rotateZ(360deg)
-ms-transform: rotateZ(360deg)
transform: rotateZ(360deg)
}
</style>
</head>
<body>
<div class="keleyi"></div>
</body>
</html>
