CSS animation アニメGIF風のアイコン IE非対応

HTML

<span class="new">New</span>

CSS

.new {
    display: inline-block;
    * display: inline ;
    * zoom: 1; 
    background-color: #f10 ;
    color: #FFF ;
    -webkit-animation: blink 1.5s ease-in-out infinite alternate;
    -moz-animation: blink 1.5s ease-in-out infinite alternate;
    -ms-animation: blink 1.5s ease-in-out infinite alternate;
    -o-animation: blink 1.5s ease-in-out infinite alternate;
    animation: blink 1.5s ease-in-out infinite alternate;
    
}
@-webkit-keyframes blink {
    0% {opacity: 0.2;}
    100% {opacity: 1;}
}
@-moz-keyframes blink {
    0% {opacity: 0.2;}
    100% {opacity: 1;}
}
@-ms-keyframes blink {
    0% {opacity: 0.2;}
    100% {opacity: 1;}
}
@-o-keyframes blink {
    0% {opacity: 0.2;}
    100% {opacity: 1;}
}
@keyframes blink {
    0% {opacity: 0.2;}
    100% {opacity: 1;}
}

デモ demo

New

IEは10以上なので使うの無理だな・・・
http://caniuse.com/css-animation

jQuery版 js

   $(function(){
        setInterval(function(){
            $('.ico_new').animate(
                {opacity:0.2, duration:1000},
                {complete:function(){
                    $('.ico_new').animate({opacity:1, duration:1000})
                }}
            );
        }, 3000);
    })

デモ2 demo2

New