CSS中TranslateY无法超出特定边界，如何实现落地页加载时标题滑动入场效果

问题原因与修复方案 #

你遇到的translateY无法超出边界的问题，主要是两个原因：一是没有给html/body设置高度导致父容器百分比高度失效，二是初始位移值设置过小没有移出视口范围，另外还缺少过渡动画的配置。以下是完整可运行的修改代码：

修改后的CSS

/* 先给html和body设置高度，保证百分比高度生效 */
html, body {
  height: 100%;
}
*{
    padding: 0px;
    margin: 0px;
    overflow-x: hidden;
    font-family: Open Sans;
    
}


.landing{
    background-image: url("bali.jpg");
    width: 100%;
    height: 80%;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center center;
    background-size: cover;
    opacity: .9;
}


h1{
    font-weight: bold;
    color: white;
    margin:20px;
    font-size: xx-large;
    text-align: center;
    position: relative;
    top: 20%;
    /* 初始状态：移到视口顶部外侧 */
    transform: translateY(-150vh);
    /* 配置过渡动画，时长可自行调整 */
    transition: transform 1s ease;
}
/* 激活后回到目标位置 */
h1.active {
  transform: translateY(-38%);
}


h3{
    font-weight: lighter;
    color: white;
    margin:20px;
    text-align: center;
    position: relative;
    top: 20%;
    /* 初始状态：移到视口左侧外侧 */
    transform: translateX(-150vw);
    /* 加0.3s延迟，等标题动画启动后再动，层次感更好 */
    transition: transform 1s ease 0.3s;
}
/* 激活后回到原位 */
h3.active {
  transform: translateX(0);
}

JS代码（写入script.js文件）

function slide() {
  const title = document.querySelector('h1');
  const subtitle = document.querySelector('h3');
  // 给标题添加激活类触发动画
  title.classList.add('active');
  subtitle.classList.add('active');
}

HTML部分无需修改，你原有代码的body标签已经绑定了onload="slide()"，页面加载完成后会自动触发滑入效果。如果需要调整动画速度，直接修改transition属性内的时长数值（单位为秒）即可。

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