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

问题描述

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