webkit css无尽的旋转动画无法正常工作。为什么？

Question

我正在尝试旋转空集图像，但我的代码无效。 如果我在自己的计算机上运行，​​图片会变黑并旋转。 有什么问题？

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

    #refresh {
        width:48px;
        height:48px;
        position:fixed;
        top:150px;
        right:150px;
        background:url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif);
        -webkit-animation: rotate 2s linear infinite;
   }

<div id="refresh" ></div>

http://jsfiddle.net/Pg2pj/

Answer 1

似乎工作得很好。这里：http://cssdesk.com/6VyMM

Answer 2

我更新了您的FIDDLE，看看。

希望这可以帮到你

---

您还可以在动画中使用百分比，而不是from和to

CSS：

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

#refresh {
    width: 48px;
    height: 48px;
    top: 0px;
    right: 0px;
    background: grey url(http://etc.usf.edu/clipart/41700/41726/fc_nullset_41726_lg.gif) no-repeat;
    background-size: 100% 100%;
    -webkit-animation: rotate 2s linear 0s infinite;
}

请记住跨浏览器兼容性：

@-webkit-keyframes rotate {
  0%   {  }
  100% {  }
}
@-moz-keyframes rotate {
  0%   {  }
  100% {  }
}
@-o-keyframes rotate {
  0%   {  }
  100% {  }
}
@keyframes rotate {
  0%   {  }
  100% {  }
}

---

#refresh {
  -webkit-animation: rotate 2s linear 0s infinite /* Safari 4+ */
  -moz-animation:    rotate 2s linear 0s infinite /* Fx 5+ */
  -o-animation:      rotate 2s linear 0s infinite /* Opera 12+ */
  animation:         rotate 2s linear 0s infinite /* IE 10+ */
}