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

Question

#box .demo1:after{background:radial-gradient(#0086d1 10%,#000 10%,#000 20%,#0086d1 20%,#0086d1 30%,#000 30%,#000 40%,#0086d1 40%,#0086d1 50%,#000 50%,#000);transition:all 1s;/*   3. 过渡效果     */}
#box:hover .demo1:after{animation:an 2s;/*  2.引入动画   */}





/*   1.这里是动画   */
@keyframes an{
    0%{background:radial-gradient(#0086d1 10%,#000 10%,#000 20%,#0086d1 20%,#0086d1 30%,#000 30%,#000 40%,#0086d1 40%,#0086d1 50%,#000 50%,#000);}
    25%{background:radial-gradient(#0086d1 10%,#000 10%,#000 20%,#0086d1 20%,#0086d1 30%,#000 30%,#000 40%,#fff 40%,#fff 50%,#000 50%,#000);}
    50%{background:radial-gradient(#0086d1 10%,#000 10%,#000 20%,#0086d1 20%,#fff 30%,#000 30%,#000 40%,#fff 40%,#fff 50%,#000 50%,#000);}
    75%{background:radial-gradient(#fff 10%,#000 10%,#000 20%,#fff 20%,#fff 30%,#000 30%,#000 40%,#fff 40%,#fff 50%,#000 50%,#000);}
}

鼠标放上去时候，动画没有效果，但是我直接在在线编辑器上是有效果的。
是哪儿引入错误？或者是书写错误，浏览器也不报错，我自己看代码，也没发现错别字什么的？
求助，谢谢。

Answer 1

可以参考下我的css3动画，写的不是很专业额，但是能动起来的呢~~~
是一个加载的动画
.hand-load i {
display: inline-block;
-moz-animation: spin 2s infinite linear;
-o-animation: spin 2s infinite linear;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}

@-moz-keyframes spin{0%{-moz-transform:rotate(0deg)}to{-moz-transform:rotate(359deg)}}
@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg)}to{-webkit-transform:rotate(359deg)}}
@-o-keyframes spin{0%{-o-transform:rotate(0deg)}to{-o-transform:rotate(359deg)}}
@-ms-keyframes spin{0%{-ms-transform:rotate(0deg)}to{-ms-transform:rotate(359deg)}}
@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(359deg)}}