如何优化Hero区域的CSS3平滑滚动提示动画？

你遇到的突然跳转问题其实很典型——当前的动画只定义了单向过渡（从100vh收缩到75vh），当infinite循环触发时，动画结束后会立刻跳回初始状态，完全没有反向的平滑过渡过程，这就导致了突兀的跳转感。

核心解决方案：让动画双向循环 #

最简单的修复方式是给动画添加animation-direction: alternate属性，它会让动画在每次循环时自动反向播放，实现「100vh→75vh→100vh」的平滑往复效果。

另外，你可以微调缓动函数让过渡更自然，比如把自定义的cubic-bezier换成更贴合“呼吸感”的内置ease-in-out，或者保留你的曲线也没问题。

修改后的完整代码如下：

h1,h2{text-align:center;}
#hero {
 animation-delay: 200ms;
 animation-duration: 3s;
 animation-iteration-count: infinite;
 animation-name: herobounce;
 /* 关键：添加alternate实现反向循环 */
 animation-direction: alternate;
 /* 换成更自然的缓动曲线，也可以保留你原来的cubic-bezier */
 animation-timing-function: ease-in-out;
 background-color: yellow;
 height: 100vh;
}
#content {
 padding: 1em;
 padding-top: 0;
 background-color: blue;
 /* 额外优化：给内容区加过渡，避免Hero收缩时内容突然跳动 */
 transition: padding-top 3s ease-in-out;
}
@keyframes herobounce {
 from { height: 100vh; }
 to { height: 75vh; }
}

额外优化小技巧 #

• 同步内容区域过渡：给#content添加padding-top的过渡后，当Hero高度变化时，内容区会跟着平滑移动，整体视觉更连贯。
• 调整动画参数：如果觉得3秒的时长不合适，可以修改animation-duration；自定义缓动曲线的话，也可以慢慢调试出更符合你预期的运动节奏。
• 防止布局抖动：如果Hero内部有其他元素，建议给#hero加上overflow: hidden，避免高度变化时内部元素溢出导致布局错乱。

这样修改后，Hero区域就会在两种高度间平滑“呼吸”，用非常含蓄的方式提示用户下方还有内容，完美替代突兀的滚动箭头~

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