【原创】使用纯CSS3制作一个无限循环的动画

实际效果：

 

 

主要是使用了

 -webkit-animation

如：

 -webkit-animation:gogogo 2s infinite linear ;

其中gogogo是自己定义的动画帧，2s是整个动画的秒数，infinite是永久循环 linear是线性变化 (step-end则是无线性变化，直接输出结果)

 

代码如下：

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;

}