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

Question

我正在尝试创建一个 CSS 动画，其中我有一个带有背景图像的框架，然后我有一个需要从底部滑入框架的起重机，为此我需要 overflow:hidden; 这样您就看不到起重机滑入框架。但是在它向上滑入框架后，我需要起重机的 ARM 向下旋转并伸出框架。但是，由于我在动画的第一部分有 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

换个 Angular 思考，您可以为高度设置动画，而不是为位置设置动画，而您不需要溢出。

看看:

.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>