表示サンプルはこちら。
http://jsdo.it/goto_jp/wiUA
HTMLはこちら。
<span class='icon17'></span>
Sassの記述は下記になります。
$icon-width: 20px; $icon-height: 20px; $animationtime: 1s; $color-1: #f66; .icon17 { display:inline-block; position:relative; vertical-align:middle; width: $icon-width; height: $icon-height; margin: round($icon-width/5); animation: $animationtime scale-half infinite; -webkit-animation: $animationtime scale-half infinite; &:before, &:after { display:inline-block; content:""; position:absolute; width: round($icon-width/2); height: $icon-height; top:50%; background: $color-1; -webkit-border-radius: $icon-width $icon-width 0 0; -moz-border-radius: $icon-width $icon-width 0 0; -ms-border-radius: $icon-width $icon-width 0 0; -o-border-radius: $icon-width $icon-width 0 0; border-radius: $icon-width $icon-width 0 0; } &:before { margin-top: - $icon-height/2; left:round($icon-width/20); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); } &:after { margin-top: - $icon-height/2; right:round($icon-width/20); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); } } @keyframes scale-half { 0% { -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } 50% { -moz-transform: scale(0.5); -ms-transform: scale(0.5); -o-transform: scale(0.5); transform: scale(0.5); } 100% { -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } } @-webkit-keyframes scale-half { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(0.5); transform: scale(0.5); } 100% { -webkit-transform: scale(1); transform: scale(1); } }
before・afterの擬似要素でハートを作って、transform:scaleの拡大縮小で鼓動するように動かしています。