ちょっとかわいく震えるやつ

README

まぁ移動量をフェードさせればある程度はかわいくなるなぁというところまで。

※webkit(chrome, safari)対応しかしてません。

jsdoit.css

#box {
	width: 200px; height: 200px;
    position: absolute;
	top: 100px; left: 100px;    
	background-color: #888888;
	cursor: pointer;
    
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: linear;
}

#box.anime {
    -webkit-animation-name: shake;
}

@-webkit-keyframes shake {
    0% {
        left: 100px;
    }
    10% {
		left: 120px;
    	background-color: #aa8888;
    }
    20% {
		left: 80px;
    }
    30% {
		left: 110px;
    }
    40% {
		left: 90px;
    }
    50% {
		left: 105px;
    }
    60% {
		left: 95px;
    }
    70% {
		left: 103px;
    }
    80% {
		left: 97px;
    }
    90% {
		left: 101px;
    }
    100% {
		left: 99px;
		background-color: #888888;
    }
}

jsdoit.html

<div id="box"></div>

jsdoit.js

// クリックされてから、CSS animationが終了するまで、classNameを付ける
function clickAnimeClassName (className, $elements) {
  // クリックされたらclassNameをつける
  $elements.click(function() {
  	$(this).addClass(className);
  });

  // CSS animationが終わったら、classNameを外す
  $elements.each(function () {
    this.addEventListener('webkitAnimationEnd', function(event){
   	  $(this).removeClass(className);
    }, false);
  });
}

// デモ: $('#box')に適用する
clickAnimeClassName('anime', $('#box'));