代码如下：
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2D变换transformtitle>
<style>
*{
margin:0px;
padding:0px;
}
.div3{
/*float: left;*/
height:200px;
width:200px;
background:dodgerblue;
overflow:hidden;
position:absolute;
left:200px;
top:150px;
}
p{
font-size: 24px;
height:30px;
margin-top:10px;
color: red;
border:2px solid;
font-family: 宋体,serif;
animation:xingqi 20s linear infinite;
}
@-webkit-keyframes xingqi {
0%{ margin-top:0px;}
10%{ margin-top:-20px;}
20%{margin-top:-40px;}
30%{ margin-top:-60px;}
40%{ margin-top:-80px;}
50%{ margin-top:-100px;}
60%{ margin-top:-120px;}
70%{ margin-top:-140px;}
80%{ margin-top:-160px;}
90%{ margin-top:-180px;}
100%{ margin-top:-200px;}
}
style>
head>
<body>
<div class="div3">
<p>星期一p>
<p>星期二p>
<p>星期三p>
<p>星期四p>
<p>星期五p>
<p>星期六p>
<p>星期天p>
<p>星期一p>
<p>星期二p>
div>
body>
html>
我就想实现星期一到下面的星期二循环向上滚动，我明明设置了20秒但为啥页面上几秒不到字段就全都挤上去了，结果最后div框里都是空的。是哪里出问题了？
margin-top为负值会移动出div外，而div设置了overflow:hidden，所以最终看不到，去掉overflow:hidden就可以看到p实际还在继续移动
由于margin-top是参考上一个元素的底部或者父元素（第一个子元素），所以第一个p移动-20px，第二p实际移动了-40px，依次类推，所以挤压在一起
可以讲p设置为relative定位，然后通过设置top为负值实现一个一个网上移动
p {position:relative;
font-size: 24px;
height: 30px;
margin-top: 10px;
color: red;
border: 2px solid;
font-family: 宋体,serif;
animation: xingqi 5s linear infinite;
}
@-webkit-keyframes xingqi {
0% {
top: 0px;
}
10% {
top: -20px;
}
。。。。其他下面的margin-top全部改为top
可能是因为在动画中使用了margin-top属性，而margin属性的动画速度与其他属性不同。可以尝试使用transform: translateY()来代替margin-top来实现动画，这样速度就可以与设置的时间相匹配
您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！