我看了你的CSS代码，发现几个关键问题导致动画没正常工作，下面帮你逐一修正并解释：

问题分析 #

1. 关键帧中修改position属性会破坏动画平滑性
   你在@keyframes buttonAnimation的100%帧里加了position: relative，这种定位类型的突变会让浏览器无法处理平滑过渡，直接打断动画流程。而且你的.gl-mo已经是position: absolute，按钮完全可以依托父容器的定位来移动，不需要在动画里改定位属性。

2. 缺少定位上下文导致top值无参考基准
   .gl-mo是绝对定位，但你没给它的父元素（body）设置position: relative，也没给.gl-mo设置初始定位值，这会让动画的top变化没有明确的参考对象，表现自然不符合预期。

修正后的完整代码 #

.gl-mo{ 
  position: absolute; 
  /* 初始位置：视口外上方，配合动画滑入 */
  top: -50px;
  left: 50%;
  transform: translateX(-50%); /* 让按钮水平居中 */
  animation: buttonAnimation 3s forwards; /* forwards让动画停在最后一帧 */
}
.gl-mo button{ 
  padding: 8px 16px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
@keyframes buttonAnimation{
  0% {
    top: -50px;
    opacity: 0; /* 加上淡入效果，视觉更柔和 */
  }
  100% {
    top: 150px; /* 最终停留的目标位置 */
    opacity: 1;
  }
}
html, body { 
  height: 100%; 
  width: 100%; 
  margin: 0;
  position: relative; /* 给绝对定位的.gl-mo提供定位上下文 */
}

关键修正点说明 #

• 给html, body添加position: relative，确保.gl-mo的绝对定位是相对于视口（body）来计算的，而不是整个文档。
• 给.gl-mo设置初始的top: -50px，让按钮一开始隐藏在视口上方，动画触发后滑入到目标位置。
• 使用animation: ... forwards，让动画结束后保持最后一帧的状态，不用手动修改元素样式。
• 移除了关键帧中的position: relative，避免定位类型变化打断动画。
• 给按钮加了基础样式，你可以根据自己的设计需求调整颜色、尺寸等。

如果你的需求是按钮从上方可见位置滑到目标点（而不是从视口外进入），可以把关键帧改成这样：

@keyframes buttonAnimation{
  0% {
    top: 40px;
  }
  100% {
    top: 150px;
  }
}

这样调整后，动画应该就能按你的预期运行了。

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