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

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

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