CSS3 transition v.s. animation property

by ShadowKao

HTML

<div class="container">
  <div class="trans">
	 transition會自動反向播放動畫
	</div>
	<div class="animate">
	 animation不會自動反向播放動畫
	</div>
	<div class="animate_forTrans">
	 animation硬要學transition反向播動畫(pure css，網頁一載入就執行動畫)
	</div>
		<div class="animate_forTrans2">
	 animation硬要學transition反向播動畫(網頁一載入不執行)
	</div>
</div>

CSS

.container
{
	 width:100%;
	 height:100%;
	 background:#fff;
}
.container > div
{
	width:250px;
	height:150px; 
}
.trans
{
	background:#b68ee7;
	color:#fff;
	 
	transition:1s;
  transform:scale(1);/*正常大小*/
}
.trans:hover
{
	transform:scale(1.5);/*放大1.5倍*/
	
}
/*定義動畫關鍵影格*/
@keyframes ZoomOut /*縮小*/
{
	0%{ transform:scale(1.5);}
	100%{transform:scale( 1);}
} 
@keyframes ZoomIn /*放大*/
{
		0%{ transform:scale(1);}
	100%{transform:scale(1.5);}
}
.animate /*第二個區塊*/
{
	background:#fadc00;
	color:#fff;
	 
	animation-duration:1s;
	animation-fill-mode:both;
	
}
.animate:hover
{
	animation-name:ZoomIn; /*放大*/
}

.animate_forTrans  /*第三個區塊*/
{
	background:#434eae;
	color:#fff; 
	animation-duration:1s;
	animation-fill-mode:both;
	
	animation-name:ZoomOut;/*先縮小到預設寬高*/
	  
}
.animate_forTrans:hover {  /*第三個區塊hover*/
	animation-name: ZoomIn;/*放大*/
	  
}
.animate_forTrans2
{
	background:#4CAF50;
	color:#fff;
	 
	animation-duration:1s;
	animation-fill-mode:both; 
	/*預設把animation-name拿掉，網頁一載入不執行動畫*/
}
/*animate_forTrans2第四個區塊的動畫播放，改交由JS負責觸發*/
.enter
{
	animation-name: ZoomIn;/*放大*/
	
}
.leave
{
	animation-name: ZoomOut;/*縮小*/
}

JavaScript

$(".animate_forTrans2").mouseenter(function(){
 $(this).removeClass("leave").addClass("enter");

}); 
$(".animate_forTrans2").mouseleave(function(){
 $(this).removeClass("enter").addClass("leave");

} );