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

以不同的方式思考，而不是动画的位置，你可以设置高度动画，你不需要溢出。

看看：

＆＃13;

＆＃13;

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

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;