我在一个简单的动画中遇到了一个奇怪的问题：四个/三个元素应该从容器的中心移动到角落：
...我在一个简单的动画中遇到了一个奇怪的问题：四个/三个元素应该从容器的中心移动到角落：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Animation</title>
<style>
body {
margin: 0px;
}
.container {
width: 100%;
height: 800px;
background-color: grey;
position: relative;
}
.div1 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
animation: right-bottom 1s;
animation-fill-mode: forwards;
}
.div2 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
animation: right-top 1s;
animation-fill-mode: forwards;
}
.div3 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
animation: left-top 1s;
animation-fill-mode: forwards;
}
.div4 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
animation: left-bottom 1s;
animation-fill-mode: forwards;
}
@keyframes right-top {
from {
right: 50%;
top: 50%;
}
to {
right: 0;
top: 0%;
}
}
@keyframes right-bottom {
from {
right: 50%;
bottom: 50%;
}
to {
right: 0%;
bottom: 0%;
}
}
@keyframes left-top {
from {
top: 50%;
left: 50%;
}
to {
top: 0%;
left: 0%;
}
}
@keyframes left-bottom {
from {
left: 50%;
bottom: 50%;
}
to {
left: 0%;
bottom: 0%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="div1">remove this</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
</div>
</body>
</html>
当所有子 div 都存在时，动画效果很好。但是，当我删除内容为“删除此 div”的 div.div1 时，其余 div 会跳过第一部分，直接移动到角落。我很无助，不知道这种行为的原因是什么。
我期望动画以相同的方式工作，与 div 的数量无关。我尝试在 load 事件或 DOMDocumentReady 上启动动画，但没有成功。当我添加延迟时，动画再次正常工作：
.container div {
animation-delay: 1000ms;
}
但是延迟并不受欢迎。当我将持续时间增加到 10 秒时，动画再次正常工作。更新：对我来说，此问题发生在 Windows 10、Opera、Chrome、Edge 上。
我使用在线 html 编辑器运行了您的代码，即使没有 div1 也能正常工作。您还可以对 div1 使用 \'display: none;\' 样式。
有趣的是，我能够在 Mac Monterey 上的 Chrome v128 上复制该问题（并且在 Safari 上没有问题）另外，在我的情况下，div 为空会导致动画跳过前半部分，所以这是我的有效方法：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Animation</title>
<style>
body {
margin: 0px;
}
.container {
width: 100%;
height: 800px;
background-color: grey;
position: relative;
}
/* .div1 {
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
animation: right-bottom 1s;
animation-fill-mode: forwards;
} */
.div2 {
width: 100px;
height: 100px;
color: cornflowerblue;
background-color: cornflowerblue;
position: absolute;
animation: right-top 1s;
animation-fill-mode: forwards;
}
.div3 {
width: 100px;
height: 100px;
color: cornflowerblue;
background-color: cornflowerblue;
position: absolute;
animation: left-top 1s;
animation-fill-mode: forwards;
}
.div4 {
width: 100px;
height: 100px;
color: cornflowerblue;
background-color: cornflowerblue;
position: absolute;
animation: left-bottom 1s;
animation-fill-mode: forwards;
}
@keyframes right-top {
from {
right: 50%;
top: 50%;
}
to {
right: 0;
top: 0%;
}
}
/* @keyframes right-bottom {
from {
right: 50%;
bottom: 50%;
}
to {
right: 0%;
bottom: 0%;
}
} */
@keyframes left-top {
from {
top: 50%;
left: 50%;
}
to {
top: 0%;
left: 0%;
}
}
@keyframes left-bottom {
from {
left: 50%;
bottom: 50%;
}
to {
left: 0%;
bottom: 0%;
}
}
</style>
</head>
<body>
<div class="container">
<!-- <div class="div1">Removed</div> -->
<div class="div2">2</div>
<div class="div3">3</div>
<div class="div4">4</div>
</div>
</body>
</html>我将进一步研究究竟是什么原因造成的，但似乎页面上没有内容会导致动画出现一些错误（因为当我在文档的任何位置添加文本时它再次正常工作）。