CSS循环动画出现画面断层 如何实现音符下落无缝连续效果

问题根因 #

现有动画出现空白间隔的核心原因有2点：

• 动画关键帧逻辑和背景重复周期不匹配：你只定义了@keyframes的起始帧，动画结束时会跳回初始状态，位移量没有和背景的纵向重复单元高度对齐，导致跳变时出现空白
• background-size: cover会自动拉伸背景图，导致背景重复的纵向周期不稳定，无法和动画位移精准匹配

调整后的代码 #

CSS 代码 #

.notes-wrapper {
    overflow: hidden;    
    height: 630px;
    position: relative; /* 作为内部元素定位容器 */
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin-top: -75px;
    margin-bottom: -75px;
    margin-left: -500px;
    margin-right: -500px;
}
/* 抽离logo行内样式统一管理 */
.notes-wrapper .logo {
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1; /* 保证logo浮在音符背景上层 */
    background: transparent;
}
.notes {
    background: url("gantry-theme://custom/images/background.svg") center top repeat-y !important; /* 设为纵向重复，对齐顶部 */
    height: 1680px; /* 仅保留可视高度+1个重复周期高度即可，630+1050=1680，降低性能消耗 */
    animation: fall 10s linear infinite;
    position: absolute; /* 脱离文档流，不挤压logo位置 */
    width: 100%;
    z-index: 0;
    background-size: 100% 1050px; /* 固定背景纵向高度，保证重复周期稳定 */
    top: 0;
    left: 0;
}
@keyframes fall {
    0% {
        transform: translateY(-1050px); /* 起始位置：向上偏移1个完整背景周期 */
    }
    100% {
        transform: translateY(0); /* 结束位置：刚好走完1个完整周期，下一轮动画启动时无缝衔接 */
    }
}

HTML 代码 #

<div class="notes-wrapper"> 
  <img class="logo" src="images/logo/BandAllonnaisedudule.png" alt="乐队logo" />
  <div class="notes"> </div>
</div>

补充说明 #

如果你的background.svg实际高度不是1050px，把代码中所有的1050px替换成SVG的实际高度即可，只要保证动画位移量和背景重复单元高度完全一致，就不会出现空白间隔。

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