用transition过渡写一个手风琴

手风琴（transition）

之间用了很多方法写了手风琴，js，jquery都可以，这回是用HTML5中新添加的过渡属性transition写的。（本案例没有考虑各浏览器兼容性）
效果如下（oh~这该死的gif，效果真差）:

代码如下：(CSS部分用到了渐变)
CSS部分

body, ul {
		padding: 0px;
		margin: 0px;
	}
	div {
		margin: 50px auto;
		height: 400px;
		width: 1000px;
	}
	ul {
		list-style: none;
	}
	ul>li {
		float: left;
		height: 400px;
		width: 200px;
		font: 500 20px/400px "simsun";
		text-align: center;
		color: #fff;
		transition: width 0.5s linear;
		overflow: hidden;
	}
	ul>li:hover {
		width: 400px;
	}
	li:nth-of-type(1) {
		background-color: #FF3CAC;
		background-image: linear-gradient(225deg, #FF3CAC 0%, #784BA0 50%, #2B86C5 100%);
		border-radius: 20px 0px 0px 20px;
	}
	li:nth-of-type(2) {
		background-color: #D9AFD9;
		back