Html CSS动画没有正确播放-起伏？
矩形应该向下移动，先向左然后向右。但出于某种原因，他们只是有点“跳跃”。有人能告诉我为什么吗Html CSS动画没有正确播放-起伏？,html,css,Html,Css,矩形应该向下移动，先向左然后向右。但出于某种原因，他们只是有点“跳跃”。有人能告诉我为什么吗 <!DOCTYPE html> <html> <body> <style> .imgbox { position: relative; float:left; text-align:center; width:120px; height:130px; border:1px solid gray; margin:0px; margin-bo
<!DOCTYPE html>
<html>
<body>
<style>
.imgbox
{
position: relative;
float:left;
text-align:center;
width:120px;
height:130px;
border:1px solid gray;
margin:0px;
margin-bottom:8px;
padding:0px;
-webkit-animation-name:drop;
-webkit-animation-duration:2s;
-webkit-animation-timing-function:linear;
-webkit-animation-play-state:running;
-webkit-animation-fill-mode:forwards;
animation-name:drop;
animation-duration:2s;
animation-timing-function:linear;
animation-play-state:running;
animation-fill-mode:forwards;
}
@-webkit-keyframes drop
{
0% {top:10px;}
100% {top:100px;}
}
@keyframes drop
{
0% {top:10px;}
100% {top:100px;}
}
</style>
<div class="imgbox" id="stuff1" style="-webkit-animation-delay:1s; animation-delay:1s"></div>
<div class="imgbox" id="stuff2" style="-webkit-animation-delay:2s; animation-delay:2s"></div>
</body>
</html>
.imgbox
{
位置：相对位置；
浮动：左；
文本对齐：居中；
宽度：120px；
高度：130像素；
边框：1px纯色灰色；
边际：0px；
边缘底部：8px；
填充：0px；
-webkit动画名称：drop；
-webkit动画持续时间：2秒；
-webkit动画计时功能：线性；
-webkit动画播放状态：正在运行；
-webkit动画填充模式：正向；
动画名称：drop；
动画持续时间：2秒；
动画计时功能：线性；
动画播放状态：运行；
动画填充模式：正向；
}
@-webkit关键帧删除
{
0%{top:10px；}
100%{top:100px；}
}
@关键帧下降
{
0%{top:10px；}
100%{top:100px；}
}
基本上，我只希望一个矩形进行动画，下一个也进行动画，只是稍微延迟。这只是一个例子，将有许多矩形，因此我不只是制作单独的div。这就是HTML的工作原理-所有内容都是以像素为单位的，所以当你移动某个东西时，你只能移动X个像素，或者不移动它 你将矩形移动90像素，持续时间为2秒，没有办法让它变得更平滑 但是，如果您担心初始跳转，那是因为元素的
toptop10px在这里查看：未测试，但当我查看您的代码时，似乎需要设置
top:10px.imgbox