CSS Animation, hide overflow for initial part of animation - css

Question

I am trying to create a CSS animation where I have a frame with a background image, then I have a crane that needs to slide into the frame from the bottom, so for that I would need overflow:hidden; so that you can't see the crane sliding into the frame. But then after it slides up into the frame, I need the arm of the crane to rotate down and extend out of the frame. However, since I have overflow:hidden; for the first part of the animation, I'm not sure how to make the second part work. Here's what I have so far:
.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

Think differently and instead of animating position you can animate the height and you don't need the overflow.
Have a look:
.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>