[poorking]

Можно попробовать использовать заранее подготовленные классы, добавляя их и удаляя можно довольно сложную анимацию сделать.

<style type = "text/css">
	#sample{
		-webkit-transition: 1s ease-in all;
		-moz-transition: 1s ease-in all;
		-ms-transition: 1s ease-in all;
		-o-transition: 1s ease-in all;
		transition: 1s ease-in all;
		width: 100px;
		height: 30px;
	}
	
	.change{
		color: red;
		background-color: green;
		border: 5px solid yellow;
		width: 200px !important;
		height: 100px !important;	
	}
	
</style>

<div id = "sample">hover me!</div>
<script type = "text/javascript">
window.onload = function(){
	var sample = document.getElementById("sample");
	
	sample.onmouseover = function(){
		this.className = "change";
		this.innerHTML = "click me!"
	}
	sample.onclick = function(){
		this.className = "";
		this.innerHTML = "hover me!";
	}
}
</script>

в css я установил длительность 1с, конец анимации можно отловить если засечь время от ее начала, а начало происходит по какому либо действию, что нибудь можно придумать