익스플러에서 animation 이 안되는데요...

a { display:block; position:relative; background: url('/data/main/logo.png')no-repeat left center; width: 180px; height: 100px; }

a:after { position:absolute; display:block; width:46px; height:43px; content:''; right:38px; top:25px;    background:url('/data/main/logo3.png'); animation: logo_effect 2.5s linear infinite; }

@keyframes logo_effect {
         0% { background:url('/data/main/logo3.png'); }
        33% { background:url('/data/main/logo2.png'); }        
        66% { background:url('/data/main/logo1.png'); }
        100% { background:url('/data/main/logo3.png');}
}

a:after 의 animation이 익스플러에서만 작동이 안되는데요... (익스플러 버전 11)

이유를 모르겠어요.. ㅠ.ㅠ

아시는분 부탁드려요 ㅠ.ㅠ