WebKit的CSS旋转不息的动画。怎么样？ [英] webkit css endless rotation-animation. How?

问题描述

我想CSS来让我加载图标旋转。

我有图标和明年code：

 ＆LT;风格＆GT;
＃TEST {
    宽度：32PX;
    高度：32PX;
    背景：网址（'refresh.png'）;
}.rotating {
    -webkit-变换：旋转（360deg）;
    -webkit-过渡时间：1秒;
    -webkit-过渡延迟：现在;
    -webkit-动画定时功能：线性的;
    -webkit-动画迭代计数：无限;
}
＆LT; /风格＆GT;＆LT; D​​IV ID ='测试'类='旋转'＆GT;＆LT; / DIV＆GT;
 

但它不想工作。怎么办？

解决方案

  @  -  WebKit的关键帧旋转/ * Safari和Chrome * / {
  从{
    -ms变换：旋转（0deg）;
    -moz-变换：旋转（0deg）;
    -webkit-变换：旋转（0deg）;
    -o变换：旋转（0deg）;
    变换：旋转（0deg）;
  }
  至 {
    -ms变换：旋转（360deg）;
    -moz-变换：旋转（360deg）;
    -webkit-变换：旋转（360deg）;
    -o变换：旋转（360deg）;
    变换：旋转（360deg）;
  }
}
@keyframes旋转{
  从{
    -ms变换：旋转（0deg）;
    -moz-变换：旋转（0deg）;
    -webkit-变换：旋转（0deg）;
    -o变换：旋转（0deg）;
    变换：旋转（0deg）;
  }
  至 {
    -ms变换：旋转（360deg）;
    -moz-变换：旋转（360deg）;
    -webkit-变换：旋转（360deg）;
    -o变换：旋转（360deg）;
    变换：旋转（360deg）;
  }
}
.rotating {
  -webkit-动画：旋转2S线性无穷;
  -moz-动画：旋转2S线性无穷;
  -ms动画：旋转2S线性无穷;
  -o-动画：旋转2S线性无穷;
  动画：旋转2S线性无穷;
}
 

I want to make rotation of my loading icon by css.

I have icon and next code:

<style>
#test {
    width: 32px;
    height: 32px;
    background: url('refresh.png');
}

.rotating {
    -webkit-transform: rotate(360deg);
    -webkit-transition-duration: 1s;
    -webkit-transition-delay: now;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}
</style>

<div id='test' class='rotating'></div>

But it don't want to work. What to do?

解决方案

@-webkit-keyframes rotating /* Safari and Chrome */ {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotating {
  from {
    -ms-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -ms-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
.rotating {
  -webkit-animation: rotating 2s linear infinite;
  -moz-animation: rotating 2s linear infinite;
  -ms-animation: rotating 2s linear infinite;
  -o-animation: rotating 2s linear infinite;
  animation: rotating 2s linear infinite;
}

这篇关于WebKit的CSS旋转不息的动画。怎么样？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！