表示サンプルはこちら。
http://jsdo.it/goto_jp/eeEk
HTMLはこちら。
<span class='icon15'></span>
Sassの記述は下記になります。
$icon-width: 15px; $icon-height: 15px; $animationtime: 2s; $color-1: #666; .icon15 { display:inline-block; position:relative; vertical-align:middle; width: $icon-width; height: $icon-height; &:before, &:after { display:inline-block; content:""; position:absolute; background: $color-1; } &:before { animation: $animationtime worm1 infinite; -webkit-animation: $animationtime worm1 infinite; } &:after { animation: $animationtime worm2 infinite; -webkit-animation: $animationtime worm2 infinite; } } @keyframes worm1 { 0% { top: 0; right: $icon-width/3*2; bottom: $icon-height/3*2; left: 0; } 12.5% { top: 0; right: $icon-width/3*2; bottom: 0; left: 0; } 25% { top: $icon-height/3*2; right: $icon-width/3*2; bottom: 0; left: 0; } 37.5% { top: $icon-height/3*2; right: 0; bottom: 0; left: 0; } 50% { top: $icon-height/3*2; right: 0; bottom: 0; left: $icon-width/3*2; } 62.5% { top: 0; right: 0; bottom: 0; left: $icon-width/3*2; } 75% { top: 0; right: 0; bottom: $icon-height/3*2; left: $icon-width/3*2; } 87.5% { top: 0; right: 0; bottom: $icon-height/3*2; left: 0; } 100% { top: 0; right: $icon-width/3*2; bottom: $icon-height/3*2; left: 0; } } @-webkit-keyframes worm1 { 0% { top: 0; right: $icon-width/3*2; bottom: $icon-height/3*2; left: 0; } 12.5% { top: 0; right: $icon-width/3*2; bottom: 0; left: 0; } 25% { top: $icon-height/3*2; right: $icon-width/3*2; bottom: 0; left: 0; } 37.5% { top: $icon-height/3*2; right: 0; bottom: 0; left: 0; } 50% { top: $icon-height/3*2; right: 0; bottom: 0; left: $icon-width/3*2; } 62.5% { top: 0; right: 0; bottom: 0; left: $icon-width/3*2; } 75% { top: 0; right: 0; bottom: $icon-height/3*2; left: $icon-width/3*2; } 87.5% { top: 0; right: 0; bottom: $icon-height/3*2; left: 0; } 100% { top: 0; right: $icon-width/3*2; bottom: $icon-height/3*2; left: 0; } } @keyframes worm2 { 0% { top: $icon-height/3*2; right: 0; bottom: 0; left: $icon-width/3*2; } 12.5% { top: 0; right: 0; bottom: 0; left: $icon-width/3*2; } 25% { top: 0; right: 0; bottom: $icon-height/3*2; left: $icon-width/3*2; } 37.5% { top: 0; right: 0; bottom: $icon-height/3*2; left: 0; } 50% { top: 0; right: $icon-width/3*2; bottom: $icon-height/3*2; left: 0; } 62.5% { top: 0; right: $icon-width/3*2; bottom: 0; left: 0; } 75% { top: $icon-height/3*2; right: $icon-width/3*2; bottom: 0; left: 0; } 87.5% { top: $icon-height/3*2; right: 0; bottom: 0; left: 0; } 100% { top: $icon-height/3*2; right: 0; bottom: 0; left: $icon-width/3*2; } } @-webkit-keyframes worm2 { 0% { top: $icon-height/3*2; right: 0; bottom: 0; left: $icon-width/3*2; } 12.5% { top: 0; right: 0; bottom: 0; left: $icon-width/3*2; } 25% { top: 0; right: 0; bottom: $icon-height/3*2; left: $icon-width/3*2; } 37.5% { top: 0; right: 0; bottom: $icon-height/3*2; left: 0; } 50% { top: 0; right: $icon-width/3*2; bottom: $icon-height/3*2; left: 0; } 62.5% { top: 0; right: $icon-width/3*2; bottom: 0; left: 0; } 75% { top: $icon-height/3*2; right: $icon-width/3*2; bottom: 0; left: 0; } 87.5% { top: $icon-height/3*2; right: 0; bottom: 0; left: 0; } 100% { top: $icon-height/3*2; right: 0; bottom: 0; left: $icon-width/3*2; } }
本体の範囲でbefore・afterの擬似要素をしゃくとり虫のように動かしています。
変形には width、height や transform:translate を使いたくなりますが、今回はオブジェの形成自体から width、height で行わず top、right、bottom、left を使うことで、オブジェの形成と位置を同時に調整しています。
伸びて縮んで移動するといった動きの場合、いずれにせよ top、right、bottom、left の値を動かす必要があるので、この4点だけで形成した方が楽に表現できました。