CSS3文字向上轮播

      今天闲着没事，看到隔壁老张在用jq写文字向上的轮播效果，遂想到用css3的动画也可以做到，然后就随手写了点，向上的过渡距离不是很精确，有需要的自行修改，欢迎提出意见。

css部分：

	div{
				width:350px;
				height: 150px;
				border: 1px solid;
				overflow: hidden;
			}
			.ul li{
				width: 300px;
				height: 38px;
			}
			.ul {
				height:220px;
				position:relative;
				transition: all 2s;
				animation:aaa 15s infinite 2s running;
			}
			@keyframes aaa {
				0% {
				transform:translatey(0px);
			}
			15% {
				transform:translatey(-38px);
			}
			25% {
				transform:translateY(-72px);
			}
			50% {
				transform:translateY(-120px);
			}
			75% {
				transform:translateY(-220px);
			}
			100% {
				transform:translateY(-400px);
			}
			}
			.ul:hover {
				animation-play-state:paused;
				cursor:pointer;
			}

html部分：

    

<div>
			<ul class="ul">
				<li>11111111111111111111111111111</li>
				<li>22222222222222222222222222222</li>
				<li>33333333333333333333333333333</li>
				<li>44444444444444444444444444444</li>
				<li>555555555555555555555555555555</li>
				<li>666666666666666666666666666666</li>
				<li>11111111111111111111111111111</li>
				<li>22222222222222222222222222222</li>
				<li>33333333333333333333333333333</li>
				<li>44444444444444444444444444444</li>
				<li>555555555555555555555555555555</li>
				<li>666666666666666666666666666666</li>
				<li>11111111111111111111111111111</li>
				<li>22222222222222222222222222222</li>
				<li>33333333333333333333333333333</li>
				<li>44444444444444444444444444444</li>
				<li>555555555555555555555555555555</li>
				<li>666666666666666666666666666666</li>
				<li>11111111111111111111111111111</li>
				<li>22222222222222222222222222222</li>
				<li>33333333333333333333333333333</li>
				<li>44444444444444444444444444444</li>
				<li>555555555555555555555555555555</li>
				<li>666666666666666666666666666666</li>
			</ul>
		</div>