网页设计：如何实现气泡上升进入可视区域后才显示的效果

你遇到的问题核心原因是：带有动画延迟的气泡，在延迟等待阶段会使用元素默认的不透明度（默认为1），所以初始状态下所有未启动动画的气泡都会直接显示在底部。

修改步骤 #

只需要调整.bubbles img的样式配置即可，不需要改动原有动画逻辑和布局规则：

• 给气泡元素设置默认透明度为0，保证初始化时默认隐藏
• 新增animation-fill-mode: backwards配置，让气泡在延迟阶段自动应用动画第一帧的隐藏属性

修改后的代码片段 #

.bubbles img {
  width: 50px;
  animation: bubble 7s linear infinite;
  /* 新增以下2行配置 */
  opacity: 0;
  animation-fill-mode: backwards;
}

补充说明 #

animation-fill-mode: backwards的作用是在动画的延迟等待阶段，自动应用@keyframes中0%帧的所有属性，也就是保持opacity: 0的隐藏状态，直到延迟时间结束动画正式启动，才会跟着动画规则逐步上升、调整透明度，刚好在进入可视区域的过程中逐渐显示。

如果你的页面是满屏无滚动的场景，还可以添加以下配置作为双重保险，直接裁剪掉可视区域外的所有内容：

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
}

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