刷新按钮旋转样式,兼容各浏览器

.refresh-animation {
  animation: rotate 4s infinite;
  -webkit-animation: rotate 1s infinite; /*Safari and Chrome*/
}

@keyframes rotate {
  0%{
    transform:rotate(0deg);
    -webkit-transform: rotate(0deg);
    -ms-transform:rotate(0deg);     /* IE 9 */
    -moz-transform:rotate(0deg);    /* Firefox */
    -o-transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
    -webkit-transform: rotate(360deg);
    -ms-transform:rotate(360deg);   /* IE 9 */
    -moz-transform:rotate(360deg);  /* Firefox */
    -o-transform:rotate(360deg);
  }
}

@-webkit-keyframes rotate {
  0%{
    -webkit-transform: rotate(0deg);
  }
  100%{
    -webkit-transform: rotate(360deg);
  }
}
@-ms-keyframes rotate {
  0%{
    -ms-transform:rotate(0deg);
  }
  100%{
    -ms-transform:rotate(360deg);
  }
}
@-moz-keyframes rotate {
  0%{
    -moz-transform:rotate(0deg);
  }
  100%{
    -moz-transform:rotate(360deg);
  }
}
@-o-keyframes rotate {
  0%{
    -o-transform:rotate(0deg);
  }
  100%{
    -o-transform:rotate(360deg);
  }
}

猜你喜欢

转载自blog.csdn.net/jstljspservlet/article/details/102560603