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

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