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