CSS3 animation 和 transition 的有关问题

CSS3 animation 和 transition 的问题
animation是动画 他可以设置百分比的样式  transition 只能设置0% 和100% 的样式 我怎么让 transition 也可以设置改变中途的样式呢 而且怎么让animation的动画像transition 一样控制他的播放 就是我点击一个按钮他才播放 而且不刷新的情况下多次点击就多次播放  
------解决方案--------------------

引用:

Quote: 引用:

你可以控制改变 样式名 

求教

用户来控制开始播放,是这意思?

<style>

div{opacity:0;position:absolute;top:50%;left:50%;width:300px;height:150px;margin:-75px 0 0 -150px;}

.over{border:3px solid #eee;background:#e0e0e0;}

 

.over{

	-webkit-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;

	-moz-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;

	-o-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;

	-ms-animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;

	animation:animations 2.5s ease-out,animations3 1s ease-out 2.5s;

}

@-webkit-keyframes animations{

	0%{-webkit-transform:scale(0);opacity:0;}

	40%{-webkit-transform:scale(1);opacity:1;}

	100%{opacity:1;}

}

@-moz-keyframes animations{

	0%{-moz-transform:scale(0);opacity:0;}

	40%{-moz-transform:scale(1);opacity:1;}

	100%{opacity:1;}

}

@-o-keyframes animations{

	0%{-o-transform:scale(0);opacity:0;}

	40%{-o-transform:scale(1);opacity:1;}

	100%{opacity:1;}

}

@-ms-keyframes animations{

	0%{-ms-transform:scale(0);opacity:0;}

	40%{-ms-transform:scale(1);opacity:1;}

	100%{opacity:1;}

}

@keyframes animations{

	0%{transform:scale(0);opacity:0;}

	40%{transform:scale(1);opacity:1;}

	100%{opacity:1;}

}

  

</style>

 

 <div class="over" id="test" ></div>

<button onclick="fn()" >test</button>



<script>

	var div=document.getElementById('test');

	function fn(){

		div.className='';

		setTimeout(function(){

			div.className='over';