利用JS和css3实现动画效果替代js的时间事件

鼠标点击DIV缩小

HTML

<div id="div1" class="div1">
	
</div>
<div id="div2">
	
</div>

CSS

.div1{
  width: 1000px;
  height: 200px;
  border:1px solid #f00;
  margin: auto;
  background: #0f0;
  transition-property:all;
  -moz-transition-property:all;
  -webkit-transition-property:all;
  transition-duration:2s;
  -moz-transition-duration:2s;
  -webkit-transition-duration:2s;
  transition-timing-funciton:ease-in-out;
  -webkit-transition-timing-funciton:ease-in-out;
  -moz-transition-timing-funciton:ease-in-out;
  /*transition-delay:1s;
  -webkit-transition-delay:1s;
  -moz-transition-delay:1s;*/
}
.cW{
  width: 100px;
  border:1px solid #0f0;
  background: #f00;
}

JS

var div1=document.getElementById("div1");
	div1.οnclick=function(){
		div1.className="cW div1";
	}