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>