CSS3加载动画（原创）

利用CSS3中的animation属性可以实现很多很炫的动画效果。下面是自己写的一个动画加载效果，有兴趣的朋友可以看看。先看看animation属性有哪些：

@keyframes                   规定对象动画。
animation-name               规定@keyframes动画的名称。
animation-duration           规定动画完成所花费的时间，单位秒或毫秒。默认为0。
animation-timing-function    规定动画的过渡类型。默认为ease（平滑过渡）。linear（线性过渡）；ease-in（动画由慢到快）；ease-out（动画由快到慢）；ease-in-out（动画由慢到快再到慢）。
animation-delay              规定对象动画何时开始。默认为0。
animation-iteration-count    规定对象动画的播放次数。默认为1。
animation-direction          规定对象动画是否反向播放。默认为normal（动画正常播放）。alternate（动画按正反方向交替播放）。
animation-play-state         规定对象动画是否正在运行或暂停。默认为running（动画正在播放）。paused（动画已暂停）。
animation-fill-mode          规定对象动画之外的时间状态。

案例

效果演示.gif

实际的效果比上面这个效果图更炫哦！复制代码到本地自己运行下吧~