How to turn off box class animation

Question

Box class get animated with piston class but i want it to stay in one position. I didn't know how he inherit this animation or why. I tried use (animation: none !important;) but it didn't work.

@keyframes piston {
  0%,
  100% {
    margin-top: 175px
  }
  50% {
    margin-top: 50px
  }
}

@keyframes handle {
  0%,
  100% {
    height: 225px
  }
  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: 1px;
}

<div class='handle'>
  <div class='piston'></div>
</div>
<div class='box'></div>

Answer 1

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>