How to turn off box class animation
You can do this by putting the div with the .box class before the div with the .handle class in your HTML, and set the .box class to have position: fixed in your CSS.
Your animation positioning was slightly off, so I've fixed that for you as well. You can change the animation back and resize the height of the box to make it fit as well.
@keyframes piston {
0%,
100% {
margin-top: 140px
}
50% {
margin-top: 50px
}
}
@keyframes handle {
0%,
100% {
height: 175px
}
50% {
height: 100px
}
}
.piston {
animation: piston 5s linear infinite;
background-color: black;
border: 3px solid black;
width: 150px;
height: 50px;
margin-left: -68px
}
.handle {
animation: handle 5s linear infinite;
width: 25px;
height: 225px;
margin-left: 68px;
border: 5px black solid;
background-color: black;
}
.box {
width: 156px;
height: 200px;
border: 3px solid red;
border-top: none;
margin-left: 2px;
position: fixed;
}<div class='box'></div>
<div class='handle'>
<div class='piston'></div>
</div>You can simplify your animation using one element like below:
.box {
width: 156px;
height: 200px;
border: 3px solid red;
border-top: none;
position:relative;
overflow:hidden;
}
.box:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:
linear-gradient(#000,#000) center/25px 100% no-repeat;
border-bottom:50px solid;
box-sizing:border-box;
animation:change 2s infinite alternate;
}
@keyframes change {
from {
transform:translateY(-60%);
}
}<div class='box'></div>Another idea with only background animation:
.box {
width: 156px;
height: 200px;
border: 3px solid red;
border-top: none;
background:
linear-gradient(#000,#000) bottom center/25px 100%,
linear-gradient(#000,#000) bottom /100% 50px;
background-repeat:no-repeat;
background-origin:content-box;
box-sizing:border-box;
animation:change 2s infinite alternate;
}
@keyframes change {
to {
padding-bottom:120px;
}
}<div class='box'></div>