テキストをぶるんってする

最初は普通のテキストです。

html
<ul class="list01">
  <li>List 01</li>
  <li>List 02</li>
  <li>List 03</li>
  <li>List 04</li>
</ul>

jQueryの部分。
animate をメソッドチェーンでこまかく繋げてけばぶるんって感じになります。

JavaScript
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
   <script type="text/javascript">
   $(function() {
       $('.list01 li').click(function(){
           $(this)
               .animate({'marginLeft':'10px'}, 20)
               .animate({'marginLeft':'-8px'}, 20)
               .animate({'marginLeft':'6px'}, 20)
               .animate({'marginLeft':'-4px'}, 20)
               .animate({'marginLeft':'2px'}, 20)
               .animate({'marginLeft':'-0px'}, 20);
       });
   });
   </script>

CSS3でテキストをぶるんってする

CSS3っていってもクラスのON/OFFでJS使います。

JavaScript
$(function() {
       var list = $('.list01');
       list.find('li').click(function(){
           list.children('li').removeClass('active');
           $(this).addClass('active');
       });
   });

アニメーション部分です。
-webkit-とかのベンダープレフィクスは省略してます。

css
.list01 li.active {
  animation: buller 0.2s linear;
}
@keyframes buller {
  0%{margin-left: 10px;}
  20%{margin-left: -8px;}
  40%{margin-left: 6px;}
  60%{margin-left: -4px;}
  80%{margin-left: 2px;}
  100%{margin-left: 0px;}
}

枠をぶるんってする

枠だけぶるんってしたいんですよね。
cssは下記のように設定します。
span 要素が枠になっています。
outline プロパティでいけそうな気がしますが、わかりませんでした。

css
.list01 li {
  cursor: pointer;
  padding: 8px;
  position: relative;
  margin-bottom: 1px;
  list-style: none;
}


.list01 li span {
  position: absolute;
  border: solid 1px #8EC5E6;
  background-color: #E7F2FA;
  display: block;
  z-index: -1;
  width: 100%;
  left: 0;
  top: 0;
  border-radius: 3px;
}

jQueryではクリックしたときにspanを追加して、さにほどと同じようにアニメーションを繋げてきます。

JavaScript
$(function() {
       var list = $('.list01');
       list.find('li').click(function(){
           var listH = $(this).innerHeight();
           list.find('span').remove();
           $(this)
               .append('<span></span>')
               .find('span')
                   .height(listH)
                   .animate({'marginTop':'4px'}, 20)
                   .animate({'marginTop':'-4px'}, 20)
                   .animate({'marginTop':'2px'}, 20)
                   .animate({'marginTop':'-2px'}, 20)
                   .animate({'marginTop':'1px'}, 20)
                   .animate({'marginTop':'0px'}, 20);
       });
   });

css3で影もアニメーションしてやるとちょっとだけいい感じになります。

css
.list01 li span {
           ・・・
           animation: buller 0.2s linear;
       }
       @keyframes buller {
           0%{box-shadow: 0px 3px 2px #afbed6, 0px -3px 2px #afbed6;}
           100%{box-shadow: 0px 0px 0px #afbed6, 0px 0px 0px #afbed6;}
       }