html 圆圈扩大动画,CSS3圆圈动画放大缩小循环动画效果

今天在写一个zblog主题的时候，在无限下拉加载等待时间内，需要加一个动画循环效果，如上图！

1、简单放大缩小循环！html>

CSS3圆圈动画放大缩小循环动画效果

.dot {

margin: 150px auto;

width: 200px;

height: 200px;

background-color: #6190e8;

border-radius: 50%;

/*box-shadow: 0 0 10px rgba(0,0,0,.3) inset;*/

-webkit-animation-name: 'ripple';/*动画属性名，也就是我们前面keyframes定义的动画名*/

-webkit-animation-duration: .5s;/*动画持续时间*/

-webkit-animation-timing-function: ease; /*动画频率，和transition-timing-function是一样的*/

-webkit-animation-delay: 0s;/*动画延迟时间*/

-webkit-animation-iteration-count: infinite;/*定义循环资料，infinite为无限次*/

-webkit-animation-direction: alternate;/*定义动画方式*/

}

@k