section内部p标签从页面底部向上移动动画不生效如何解决

问题原因&解决方法 #

你当前的代码存在3个导致动画不生效的问题，逐一修改即可：

• 关键帧中bottom属性的数值缺少单位，CSS中非0的长度值必须指定单位（如px、vh），否则属性直接失效。
• p元素未设置定位属性，bottom属性仅对position为非static值的元素生效，默认的static定位下修改bottom没有任何效果。
• 如果你需要实现从页面底部移动的效果，当前根元素html未设置高度，导致body设置的height:100%无法继承到有效高度，页面高度仅等于内容高度，看不到从底部上移的效果。

修正后代码 #

CSS部分

/* 补充html高度声明，让body的百分比高度生效 */
html {
  height: 100%;
}
body {
  background: rgb(196, 56, 56);
  height: 100%;
  width: 100%;
  margin: 0; /* 清除默认边距避免出现多余滚动条 */
}

section {
  position: relative;
  height: 100%; /* 让section占满页面高度 */
}
section p {
  position: relative; /* 新增：开启定位让bottom属性生效 */
  color: rgb(235, 197, 31);
  /* 新增forwards参数，动画结束后停在最后一帧 */
  animation: 1s slid forwards;
}

@keyframes slid {
  0% {
    bottom: -100px; /* 补充px单位 */
    opacity: 0;
  }
  100% {
    bottom: 0;
    opacity: 1;
  }
}

HTML部分

原HTML代码无需修改即可正常运行。

小提示：如果想要更流畅的移动动画，推荐使用transform属性实现位移，不需要额外设置定位属性，示例关键帧写法：

@keyframes slid {
  0% {
    transform: translateY(100px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

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