<div id="gift-box">
  <svg viewBox="0 0 24 24">
    <path id="gift-top" class="st1" d="M12.1,7c-0.4-1.5-1-2.8-1.8-3.7S8.6,2,7.6,2C7,2,6.3,2.3,5.9,2.7C5.4,3.2,5.1,3.8,5.1,4.5 c0,0.7,0.3,1.3,0.7,1.8C6.3,6.7,7,7,7.6,7H12.1z M12.1,7c0.4-1.5,1-2.8,1.8-3.7S15.7,2,16.6,2c0.7,0,1.3,0.3,1.8,0.7 c0.5,0.5,0.7,1.1,0.7,1.8c0,0.7-0.3,1.3-0.7,1.8C17.9,6.7,17.3,7,16.6,7H12.1z"></path>
    <path id="gift-middle" class="st1" d="M21,11v8.6c0,0.6-0.3,1.3-0.8,1.7c-0.5,0.5-1.1,0.7-1.8,0.7H5.6c-0.7,0-1.3-0.3-1.8-0.7C3.3,20.8,3,20.2,3,19.6 V11 M12,11v11 M21,11H3"></path>
    <path id="gift-bottom" class="st1" d="M21.9,7H2.4C1.7,7,1.1,7.4,1.1,8v2c0,0.6,0.5,1,1.2,1h19.6c0.7,0,1.2-0.4,1.2-1V8C23.1,7.4,22.6,7,21.9,7z M12.1,7v4"></path>
  </svg>
</div>

* {
  margin: 0;
  padding: 0;
  font-size: 0;
}
body {
  position: relative;
  width: 100%;
  height: 100vh;
  background: #e8ebf3;
}
#gift-box {
  width: 250px;
  height: 250px;
  display: flex;
  background: #fff;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  align-items: center;
  justify-content: center;
  box-shadow: 2px 2px 2px #91919173;
}

svg {
  width: 50px;
      overflow: initial;
}
.st1 {
  fill: #fff;
  stroke: #2c2e42;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: 0.2s all cubic-bezier(0.19, 0.65, 0.22, 0.79);
  transform-origin: center;
}
#gift-box:hover #gift-top {
  animation: Gift-t 1.2s ease-out forwards;
}

#gift-box:hover #gift-bottom {
  animation: Gift-t 1s ease-out forwards;
}

@keyframes Gift-t {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }

  20% {
    transform: translate(0, -10%) rotate(10deg);
  }

  40% {
    transform: translate(0, 0) rotate(-7deg);
  }

  60% {
    transform: translate(0, 0) rotate(5deg);
  }

  80% {
    transform: translate(0, 0) rotate(-2deg);
  }

  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}