CSS动画，隐藏动画初始部分的溢出

Question

我正在尝试创建一个带有背景图像的框架的CSS动画，然后我有一台起重机，需要从底部滑入框架，因此我会为此需要overflow:hidden;，以便您看不到起重机滑入框架。但是，在它滑入框架后，我需要起重机的臂才能向下旋转并延伸出框架。但是，由于我在动画的第一部分中拥有overflow:hidden;，因此我不确定如何使第二部分起作用。这是我到目前为止所拥有的：

.frame {
  width:600px;
  height:300px;
  background:url('http://placehold.it/600x300');
  overflow:hidden;
}
.crane-container {
  position:relative;
}
.crane {
  position:absolute;
  bottom:-500px;
  right:100px;
  height:200px;
  width:50px;
  animation:slideUp 3s ease-in-out;
  animation-fill-mode: forwards;
}
.arm {
  height:200px;
  width:50px;
  background:#000;
  animation:rotateArm 4s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  transform-origin:bottom left;
}
@keyframes slideUp {
	0% {
		bottom: -500px;
	}
	100% {
		bottom: -300px;
	}
}
@keyframes rotateArm {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(-120deg);
	}
}

<div class="frame">
  <div class="crane-container">
    <div class="crane">
      <div class="arm"></div>
    </div>
  </div>
</div>

Answer 1

思考的思考不同，而不是动画位置，您可以使高度动画，而不需要溢出。

有一个查看：

.frame {
  width: 600px;
  height: 300px;
  background: url('http://placehold.it/600x300');
  overflow: visible;
}
.crane-container {
  position: relative;
  height:100%;
}
.crane {
  position: absolute;
  bottom: 0;
  right: 100px;
  height: 0;
  width: 50px;
  animation: slideUp 3s ease-in-out;
  animation-fill-mode: forwards;
}
.arm {
  height: 100%;
  width: 100%;
  background: #000;
  animation: rotateArm 4s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 3s;
  transform-origin: bottom left;
}
@keyframes slideUp {
  0% {
    height: 0;
  }
  100% {
    height: 200px;
  }
}
@keyframes rotateArm {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-120deg);
  }
}
@keyframes over {
  0%,100% {
    overflow:visible;
  }
}

<div class="frame">
  <div class="crane-container">
    <div class="crane">
      <div class="arm"></div>
    </div>
  </div>
</div>