gpt4 book ai didi

html - CSS 动画播放不正确 - 断断续续?

转载 作者:太空宇宙 更新时间:2023-11-04 13:39:24 28 4
gpt4 key购买 nike

矩形应该向下移动,先向左然后向右。但出于某种原因,他们只是有点“跳跃”。谁能告诉我为什么?

<!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>

基本上,我只希望一个矩形进行动画处理,而下一个矩形也进行动画处理,只是稍微延迟一下。这只是一个示例,将会有很多矩形,因此我不只制作单独的 div。

最佳答案

嗯,这就是 HTML 中的工作方式 - 一切都以像素为单位,因此当您移动某物时,您只能移动 X 像素,或者不移动它。

您在 2 秒内将矩形移动 90 像素,没有办法让它比现在更平滑。

但是,如果您担心初始跳跃,那是因为您的元素的 top 值为零,当动画开始时它立即增加到 10 像素,然后动画继续。为避免这种情况,只需将它们的 top 属性设置为 10px

在这里查看:http://jsfiddle.net/adePY/

关于html - CSS 动画播放不正确 - 断断续续?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22801590/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com