Chrome中 样式:after的问题

 

今天在看一个CSS3进度条DEMO时发现在chrome中的某元素 :after 样式显示不正常，下面是DEMO的地址

http://www.css88.com/demo/css3-progress-bars/

第二个进度条在chrome浏览器中无动画效果，贴出样式：

.shine span {
    position: relative;
}

.shine span::after {
    content: '';
    opacity: 0;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #fff;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;            
    
                /*动画*/
    -webkit-animation: animate-shine 2s ease-out infinite;
    -moz-animation: animate-shine 2s ease-out infinite;             
}

/*动画*/
@-webkit-keyframes animate-shine { 
    0% {opacity: 0; width: 0;}
    50% {opacity: .5;}
    100% {opacity: 0; width: 95%;}
}


@-moz-keyframes animate-shine {
    0% {opacity: 0; width: 0;}
    50% {opacity: .5;}
    100% {opacity: 0; width: 95%;}
}

最后再内容后面多加了个<span></span>   把after的样式加到这个样式上   .shine span::after   改成  .shine span span  测试后运行无问题，但始终没有找到问题所在~