各种动画

1、加载圆圈转动

.state{width: 50px;height: 50px;border: 5px solid rgba(255,255,255,.2);border-left-color:white ;border-radius:50% ;-webkit-animation: lood 1.1s infinite linear ;animation: lood 1.1s infinite linear ;}

@-webkit-keyframes lood{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}
@keyframes lood{
from{transform: rotate(0deg);}
to{transform: rotate(360deg);}
}

<div class="state"> </div>

2、不停圆圈小到大

.air{width: 50px;height: 50px;background: blue;border-radius: 50%;margin: 100px;
-webkit-animation: bh 0.5s linear infinite;
}
@-webkit-keyframes bh{
from{transform: scale(.3);}
to{transform: scale(1);opacity: 0;}
}

<div class="air"></div>

3、/*上线循环*/
.t0-do{width: 50px;height: 50px;background: url(http://wx.rdkj.com/Areas/Mall/Content/images/indexRipple1.png) center center no-repeat blue;background-size: 60% auto;
border-radius: 50%;animation: todo 0.5s linear infinite alternate;}
@keyframes todo{
from{transform: translateY(0px);background-color: rgba(0,0,255,0.2);}
to{transform: translateY(20px);background-color: rgba(0,0,255,1);}
}

<div class="t0-do"></div>