一、实现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
规定是否应该轮流反向播放动画。
如果可以用js来控制的话，定义好两个css动画class，当一个动画结束了删除该class，再加上下一个动画的class，就好了。如果要用纯css，则可以通过在动画里设置百分比来设置动画。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<title>执行两个CSS3动画</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.js"></script>
<style>
*{ padding:0margin:0font-size:14pxbox-sizing:border-box }
.div{ margin: 50px autowidth: 240pxheight: 240pxtext-align: centerline-height: 240pxbackground: #34343Acolor: #FFF }
.dh{ animation: dh 4s linear both }
@keyframes dh{
0%{
border-radius: 0px transform: rotateZ(0deg)
}
50%{
border-radius: 50% transform: rotateZ(0deg)
}
100%{
border-radius: 10%
transform: rotateZ(360deg)
}
}
.dh1{ animation: dh1 2s linear both }
@keyframes dh1{
0%{
border-radius: 0px transform: rotateZ(0deg)
}
100%{
border-radius: 50% transform: rotateZ(0deg)
}
}
.dh2{ animation: dh2 2s linear both }
@keyframes dh2{
0%{
border-radius: 50% transform: rotateZ(0deg)
}
100%{
border-radius: 10% transform: rotateZ(360deg)
}
}
</style>
</head>
<body>
<div class="div dh">纯CSS</div>
<div class="div div1">js控制</div>
</body>
<script type="text/javascript">
$(function(){
$('.div1').addClass('dh1')
var t = parseFloat( $('.dh1').css('animation-duration') )
setTimeout(function(){
$('.div1').removeClass('dh1').addClass('dh2')
},t*1000)
})
</script>
</html>
