我在一个简单的动画中遇到了一个奇怪的问题：四个/三个元素应该从容器的中心移动到角落：
...我在一个简单的动画中遇到了一个奇怪的问题：四个/三个元素应该从容器的中心移动到角落：
<!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 上。
