css3如何向上_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部分：

• 11111111111111111111111111111
• 22222222222222222222222222222
• 33333333333333333333333333333
• 44444444444444444444444444444
• 555555555555555555555555555555
• 666666666666666666666666666666
• 11111111111111111111111111111
• 22222222222222222222222222222
• 33333333333333333333333333333
• 44444444444444444444444444444
• 555555555555555555555555555555
• 666666666666666666666666666666
• 11111111111111111111111111111
• 22222222222222222222222222222
• 33333333333333333333333333333
• 44444444444444444444444444444
• 555555555555555555555555555555
• 666666666666666666666666666666
• 11111111111111111111111111111
• 22222222222222222222222222222
• 33333333333333333333333333333
• 44444444444444444444444444444
• 555555555555555555555555555555
• 666666666666666666666666666666