一、实现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
规定是否应该轮流反向播放动画。
CSS3 animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线
linear 匀速
ease 开始和结束慢速
ease-in 开始是慢速
ease-out 结束时慢速
ease-in-out 开始和结束时慢速
steps 动画步数
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction
normal 默认动画结束不返回
Alternate 动画结束后返回
8、animation-play-state 动画状态
paused 停止
running 运动
9、animation-fill-mode 动画前后的状态
none 不改变默认行为
forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）
backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）
both 向前和向后填充模式都被应用
10、animation:name duration timing-function delay iteration-count direction同时设置多个属性
举例 等待条：
效果：
animation-name规定需要绑定到选择器的 keyframe 名称。。animation-duration规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function规定动画的速度曲线。
animation-delay规定在动画开始之前的延迟。
animation-iteration-count规定动画应该播放的次数。
animation-direction规定是否应该轮流反向播放动画。
1,animation-name:规定需要绑定到选择器的 keyfram 名称
2,animation-duration:规定完成动画所花费的时间,以秒或毫秒计,默认值0
3,animation-timing-funtion:速度变化曲线: 默认值ease
linear:匀速 ease-in:先慢变快ease-out: 先快后慢 ease-in-out : 慢-快-慢
4,animation-delay:规定动画开始的延迟,默认值是0
5,animation-iteration-count:动画重复次数infinite是正无穷
6,animation-direction: 设置动画方向: 默认值是 nomal
reverse:反方向alternate:奇数次-正方向偶数次-反方向 alternate-reverse:奇数次-反方向,偶数次-正方向
7,animation-fill-mode:backwards: 动画完成时,保持动画开始时的状态forwards: 动画完成时,保持动画结束时的状态
8,animation-play-state:
running:默认值,执行动画
