在html中加动画效果,【CSS】在过渡里面加动画效果怎么没有效果？

#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);}

}

鼠标放上去时候，动画没有效果，但是我直接在在线编辑器上是有效果的。

是哪儿引入错误？或者是书写错误，浏览器也不报错，我自己看代码，也没发现错别字什么的？

求助，谢谢。

回答：

可以参考下我的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)}}

回答：

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