表示サンプルはこちら。
http://jsdo.it/goto_jp/2zIq
HTMLはこちら。
<span class='icon10'></span>
Sassの記述は下記になります。
$icon-width: 5px; $icon-height: 10px; $animationtime: 1.5s; $color-1: #666; .icon10 { display:inline-block; position:relative; vertical-align:middle; width: $icon-width; margin: 0 $icon-width*2; border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; animation: $animationtime border-wave1 $animationtime/5*1 infinite; -webkit-animation: $animationtime border-wave1 $animationtime/5*1 infinite; &:before, &:after { display:inline-block; content:""; position:absolute; width: $icon-width; border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; top:50%; margin-top:-$icon-height/2; } &:before { left: -$icon-width - 2; animation: $animationtime border-wave2 infinite; -webkit-animation: $animationtime border-wave2 infinite; } &:after { right: -$icon-width - 2; animation: $animationtime border-wave2 $animationtime/5*2 infinite; -webkit-animation: $animationtime border-wave2 $animationtime/5*2 infinite; } } @keyframes border-wave1 { 0% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; } 25% { border-top:solid $icon-height $color-1; border-bottom:solid $icon-height $color-1; } 50% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; } 100% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; } } @-webkit-keyframes border-wave1 { 0% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; } 25% { border-top:solid $icon-height $color-1; border-bottom:solid $icon-height $color-1; } 50% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; } 100% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; } } @keyframes border-wave2 { 0% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 25% { border-top:solid $icon-height $color-1; border-bottom:solid $icon-height $color-1; -moz-transform: translate(0, -5px); -ms-transform: translate(0, -5px); -o-transform: translate(0, -5px); transform: translate(0, -5px); } 50% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } 100% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } } @-webkit-keyframes border-wave2 { 0% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; -webkit-transform: translate(0, 0); } 25% { border-top:solid $icon-height $color-1; border-bottom:solid $icon-height $color-1; -webkit-transform: translate(0, -5px); } 50% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; -webkit-transform: translate(0, 0); } 100% { border-top:solid $icon-height/2 $color-1; border-bottom:solid $icon-height/2 $color-1; -webkit-transform: translate(0, 0); } }
まずは本体とbeforeとafterの要素で上下borderを使ってバーを作っています。
heightで箱を作らず上下borderを使っているのはアニメーション対応のためなのですが、本体を上下移動させるとbeforeとafterも一緒に上下移動します。そこの算出が非常に大変なので、上下borderの太さを変える形で対応しています。
しかしborderを使っても上に突っ張ればその分beforeとafterは下に下がろうとするので、beforeとafterはそれに対抗してmargin-topを調整する形で引っ込めている寸法です。
beforeとafterの擬似要素を使うことで、本体と併せて3つのオブジェを表現することまでは楽なのですが、アニメーションさせるとなると本体の動きにbefore・afterも追従してすまうので一手間必要になってきます。