如何让CSS实现的页面加载下移图片元素兼容小屏幕显示

• 双重偏移计算逻辑不稳定：原代码同时用top: -160% 和 transform: translateY(100%) 两个基于元素自身高度的百分比做偏移，小屏下元素自身的高度随宽度同比变化，两个偏移量叠加后的最终位置会偏离预期，很容易把图片卡在可视区域外被裁剪。
• 尺寸约束缺失：原代码只设置了width: 50%，没有给图片加最大、最小宽度约束，小屏下图片尺寸过小时，偏移量的计算误差会进一步放大，甚至完全移出可视范围。
• 过渡属性不明确：原代码的transition: 5s没有指定过渡的具体属性，不同浏览器下的默认过渡行为差异也会导致小屏下的动画表现不一致。

替换原有的.logo样式：

.logo {
  position: relative;
  /* 移除重复的top偏移，统一用transform控制动画位置，减少计算误差 */
  transform: translateY(-180%);
  width: 50%;
  /* 增加尺寸边界约束，适配不同屏幕 */
  max-width: 320px;
  min-width: 100px;
  /* 明确过渡作用于transform属性，优化动画性能 */
  transition: transform 5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: 4000ms;
  -webkit-transition-delay: 4000ms;
  -moz-transition-delay: 4000ms;
  -o-transition-delay: 4000ms;
}

/* 页面加载完成后触发动画的激活类 */
.logo.animate-in {
  transform: translateY(0);
}

补充小屏适配的媒体查询：

@media (max-width: 480px) {
  .logo {
    width: 70%;
    /* 小屏下缩小初始偏移距离，避免动画路径过长导致元素长期卡在可视区外 */
    transform: translateY(-130%);
  }
}

校验注意点：检查logo的直接父容器不要设置提前裁剪内容的overflow: hidden，否则在动画执行前，位于可视区外的logo会被直接裁剪，即使后续触发动画也无法正常显示。

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