一、实现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
规定是否应该轮流反向播放动画。
c3实现你这个需求很麻烦，建议你用JQ的animate:$('el').animate({top: "-=20",right:"-=30"}, 600)
移不动请检查该元素是否有position：relative。
或者自己用js封装一个动画。
jQuery的可以实现：1.fadeIn（速度，[回调]）通过改变所有匹配元素的不透明度来实现淡入效果，并在动画可选地触发一个回调函数后完成。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：三种预定速度字符串（“慢”，“正常”或“快速”）长的毫秒数值（如：1000）的一个表示动画或
回调（功能）：（可选）（可选）例如600毫秒缓慢淡入一段
代码：$（“P”）淡入（“慢“）
用200毫秒快速褪色的段落，然后会弹出一个对话框jQuery代码：。“动画完成”$（“P”）淡入（“快”，函数（）{
警报（ ）
}）
2.fadeOut（速度，[回调]）通过改变不透明度来实现所有匹配淡入淡出效果的元素，并在动画完成后可选地触发一个回调函数。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：三种预定速度字符串（“慢”，“正常”或“快速”）长的毫秒数值（如：1000）的一个表示动画或
回调（功能）：（可选）功能例如与段落600毫秒缓慢褪色
代码：$（“P”）。淡出（“慢”）
200毫秒段对话
代码后迅速褪色。 $（“P”）淡出（“快”，函数（）{
警报（“动画完成。”）
}）
3.fadeTo（速度，透明度，[回调]），所有匹配的元素逐步调整到指定的不透明度，并可选地触发一个回调函数完成动画后的不透明度。这个动画只调整元素的不透明度，即所有匹配元素的高度和宽度不会改变。
参数速度（字符串，数字）：表示动画或
不透明度（：三种预定速度弦长的毫秒值（1000例）（“慢”，“正常”或“快速”）之一号）：调整0和1）的回调（功能）之间的不透明度值（数。 （可选）功能 600毫秒，以缓慢调整到0.66段，能见度的透明度有关的
码2/3。 $（“p”）的fadeTo（“慢”，0.66）$（“P”）。fadeTo（“慢”，0.66）
同款200毫秒快速调整到0.25，能见度约1/4的透明度，然后会弹出一个对话框jQuery代码：$（“P”）。 fadeTo（“快”，0.25，函数（）{
警报（）“动画完成。”
}）
