CODEWITHSUNDEEP
csscss-animations
user13286
user13286

Reputation: 3075

CSS Animation, hide overflow for initial part of animation

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>

Upvotes: 2

Views: 2219

Answers (1)

Temani Afif
Temani Afif

Reputation: 273086

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>

Upvotes: 2

Related Questions