如何为column多列布局中的div编写无跨列溢出的CSS入场动画

你的原始代码存在两个核心问题：

• @keyframes 中重复定义100%关键帧，后续的属性会覆盖前面的定义，导致你写的top动画实际不会生效
• 用position: relative的top/left做偏移时，CSS列布局会按照元素的原始占位分配列位置，视觉偏移不会改变元素所属的列区域，很容易出现跨列溢出的异常

改用transform做偏移即可解决问题：transform是在元素渲染阶段做的视觉变换，不会改变元素在正常流中的占位，也不会影响CSS列布局的列分配逻辑，完全不会出现跨列溢出的问题。

修改后的完整代码如下：

<style>
#container {
  column-count: 3;
  column-gap: 40px;
  overflow: hidden; /* 可选：避免元素飞入时露出页面顶部外的部分 */
}

.bit {
  height: 400px;
  background-image: url("https://www.whatever.com");
  animation: slide 1.5s both;
}

@keyframes slide {
  0% {
    transform: translate(var(--tx, 0), -500px);
  }
  100% {
    transform: translate(0, 0);
  }
}
</style>

<div id="container">
  <div class='bit' id="a" style="--tx: -200px"></div>
  <div class='bit' id="b" style="--tx: 0"></div>
  <div class='bit' id="c" style="--tx: -200px"></div>
</div>

如果不需要区分横向偏移，可以进一步简化代码，去掉自定义变量和单独的行内样式即可：

@keyframes slide {
  0% {
    transform: translateY(-500px);
  }
  100% {
    transform: translateY(0);
  }
}
.bit {
  height: 400px;
  background-image: url("https://www.whatever.com");
  animation: slide 1.5s both;
}

如果想要三个元素错开时间飞入，提升视觉效果，可以给不同的元素加animation-delay：

#a { animation-delay: 0s; }
#b { animation-delay: 0.2s; }
#c { animation-delay: 0.4s; }

内容的提问来源于stack exchange，提问作者Julia Weber