在过渡里面加动画效果怎么没有效果？

Question

#box.demo1:after{background:radial-gradient(#0086d110%,#00010%,#00020%,#0086d120%,#0086d130%,#00030%,#00040%,#0086d140%,#0086d150%,#00050%,#000);transition:all1s;/*3.过渡效果*/}
#box:hover.demo1:after{animation:an2s;/*2.引入动画*/}
/*1.这里是动画*/
@keyframesan{
0%{background:radial-gradient(#0086d110%,#00010%,#00020%,#0086d120%,#0086d130%,#00030%,#00040%,#0086d140%,#0086d150%,#00050%,#000);}
25%{background:radial-gradient(#0086d110%,#00010%,#00020%,#0086d120%,#0086d130%,#00030%,#00040%,#fff40%,#fff50%,#00050%,#000);}
50%{background:radial-gradient(#0086d110%,#00010%,#00020%,#0086d120%,#fff30%,#00030%,#00040%,#fff40%,#fff50%,#00050%,#000);}
75%{background:radial-gradient(#fff10%,#00010%,#00020%,#fff20%,#fff30%,#00030%,#00040%,#fff40%,#fff50%,#00050%,#000);}
}
鼠标放上去时候，动画没有效果，但是我直接在在线编辑器上是有效果的。
是哪儿引入错误？或者是书写错误，浏览器也不报错，我自己看代码，也没发现错别字什么的？
求助，谢谢。

Answer 1

可以参考下我的css3动画，写的不是很专业额，但是能动起来的呢~~~是一个加载的动画.hand-loadi{display:inline-block;-moz-animation:spin2sinfinitelinear;-o-animation:spin2sinfinitelinear;-webkit-animation:spin2sinfinitelinear;animation:spin2sinfinitelinear;}@-moz-keyframesspin{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}@-webkit-keyframesspin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}@-o-keyframesspin{0%{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}@-ms-keyframesspin{0%{-ms-transform:rotate(0deg)}to{-ms-transform:rotate(359deg)}}@keyframesspin{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}

Answer 2

请问楼主这个问题解决了么css3animation和linear-gradient同时使用在chrome无动画效果我现在也卡在这里不知道怎么解决如果方便的话请尽快回复下谢谢