CSS Animation技术问题：初始动画设overflow:hidden，后续需元素超出显示

这个问题我之前也碰到过！核心矛盾就是overflow:hidden既要藏住滑入阶段的起重机，又要让后续臂部能突破容器限制对吧？其实只要把起重机拆成机身和臂部两个独立部分，分开控制容器的overflow属性，就能完美实现需求了。

核心思路 #

1. 用一个父容器承载整个起重机，父容器不设置overflow:hidden，让臂部后续可以自由超出范围。
2. 给机身单独套一个子容器，这个子容器设置overflow:hidden，专门用来隐藏机身滑入时的超出部分。
3. 分阶段控制动画：先让机身完成滑入动画，再触发臂部的旋转伸出动画。

代码实现示例 #

HTML结构

<div class="crane-parent">
  <!-- 机身容器：负责隐藏滑入时的机身 -->
  <div class="crane-body-wrapper">
    <div class="crane-body"></div>
  </div>
  <!-- 臂部：单独放在父容器里，不受机身容器的overflow限制 -->
  <div class="crane-arm"></div>
</div>

CSS样式

/* 父容器：定位整个起重机，不设overflow */
.crane-parent {
  position: relative;
  width: 200px;
  height: 400px;
  border: 1px solid #ccc;
}

/* 机身容器：设置overflow:hidden，隐藏滑入时的机身 */
.crane-body-wrapper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 机身：带背景图，执行滑入动画 */
.crane-body {
  width: 100%;
  height: 100%;
  background: url('你的机身背景图地址') bottom center no-repeat;
  background-size: contain;
  /* 初始状态在容器下方 */
  transform: translateY(100%);
  /* 滑入动画：1秒内从底部移到原位 */
  animation: slide-in 1s forwards;
}

/* 臂部：初始和机身对齐，执行旋转动画 */
.crane-arm {
  position: absolute;
  top: 50px; /* 根据你的机身位置调整 */
  left: 100px; /* 根据你的机身位置调整 */
  width: 150px;
  height: 20px;
  background: url('你的臂部背景图地址') center no-repeat;
  background-size: contain;
  /* 初始旋转角度为0，和机身保持一致 */
  transform-origin: left center; /* 以臂部左端为旋转中心 */
  opacity: 0; /* 初始隐藏，等机身滑入后显示 */
  /* 旋转动画：1秒，延迟1秒执行（等机身滑入完成） */
  animation: rotate-arm 1s 1s forwards;
}

/* 机身滑入动画关键帧 */
@keyframes slide-in {
  to {
    transform: translateY(0);
  }
}

/* 臂部旋转伸出动画关键帧 */
@keyframes rotate-arm {
  from {
    opacity: 0;
    transform: rotate(0deg);
  }
  to {
    opacity: 1;
    transform: rotate(-45deg); /* 向下旋转，超出容器范围 */
  }
}

额外说明 #

• 如果不想拆分元素，也可以通过动态修改容器的overflow属性实现：比如在机身滑入动画结束后，用JavaScript把容器的overflow:hidden改成overflow:visible，再触发臂部动画。但拆分元素的方案更纯粹，不需要JS介入。
• 注意调整臂部的transform-origin（旋转中心点），要和机身的连接位置对应，这样旋转动画才自然。

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