纯css动画（圆不停旋转、页面上拉提醒）

圆不停旋转

/* 创建动画 */
@-webkit-keyframes music { /* Safari and Chrome */
   from{transform: rotate(0deg);}
   to{transform: rotate(360deg);}
}

@-moz-keyframes music { /* Firefox */
   from{transform: rotate(0deg);}
   to{transform: rotate(360deg);}
}

@keyframes music {
   from{transform: rotate(0deg);}
   to{transform: rotate(360deg);}
}
.page-top .music{
	animation:music 1.5s infinite linear;
   -webkit-animation: music 1.5s infinite linear;  /* 使用动画 */
}

页面上拉提醒

 @-webkit-keyframes up{
   0%,30% {
     opacity: 0;
     -webkit-transform: translate(0, 10px);
   }
   60% {
     opacity: 1;
     -webkit-transform: translate(0, 0);
   }
   100% {
     opacity: 0;
     -webkit-transform: translate(0, -8px);
   }
 }

 @-moz-keyframes up {
   0%,30% {
     opacity: 0;
     -moz-transform: translate(0, 10px);
   }
   60% {
     opacity: 1;
     -moz-transform: translate(0, 0);
   }
   100% {
     opacity: 0;
     -moz-transform: translate(0, -8px);
   }
 }

 @keyframes up{
   0%,30% {
     opacity: 0;
     transform: translate(0, 10px);
   }
   60% {
     opacity: 1;
     transform: translate(0, 0);
   }
   100% {
     opacity: 0;
     transform: translate(0, -8px);
   }
 }
 
 .up{
	animation:up 1.5s infinite ease-in-out;
   -webkit-animation: up 1.5s infinite ease-in-out;
 }