表示サンプルはこちら。
http://jsdo.it/goto_jp/pk8bG
HTMLはこちら。
<span class='icon13'></span>
Sassの記述は下記になります。
$icon-width: 30px; $icon-height: 10px; $animationtime: 2s; $color-1: #096; .icon13 { display:inline-block; position:relative; vertical-align:middle; width: $icon-width; height: $icon-height; border:solid 1px $color-1; -webkit-border-radius:$icon-width; -moz-border-radius:$icon-width; -ms-border-radius:$icon-width; border-radius:$icon-width; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box; overflow: hidden; &:before { display:inline-block; content:""; position:absolute; top:0; left:0px; background:$color-1; width: $icon-width; height:$icon-height - 2; box-shadow:0 0 $icon-height/2 $icon-height/2 $color-1; animation: $animationtime wipe infinite; -webkit-animation: $animationtime wipe infinite; } } @keyframes wipe { 0% {left:-$icon-width*1.2;} 50% {left:$icon-width*1.2;} 100% {left:-$icon-width*1.2;} } @-webkit-keyframes wipe { 0% {left:-$icon-width*1.2;} 50% {left:$icon-width*1.2;} 100% {left:-$icon-width*1.2;} }
本体で枠を作り、beforeの擬似要素をその中で動かしています。
親の本体でoverflow:hidden をしておけば、擬似要素は親の範囲だけで表示することができます。