<div class="parent">
  <div class="inner">
    <div class="static">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <p>動きのないもの</p>
  </div>

  <div class="inner">
    <div class="dynamic">
      <span></span>
      <span></span>
      <span></span>
    </div>
    <p>動きのあるもの</p>
  </div>
</div>
.parent {
  height: 400px;
  width: 50%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.static {
  position: relative;
  height: 30px;
  width: 45px;
  padding: 5px;
  background-color: #8cffff;
}

.static span {
  position: absolute;
  display: block;
  height: 2px;
  width: calc(100% - 10px);
  background-color: black;
}

.static span:first-child {
  top: 5px;
}

.static span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
}

.static span:last-child {
  bottom: 5px;
}

.dynamic {
  position: relative;
  height: 30px;
  width: 45px;
  padding: 5px;
  background-color: #fb7276;
}

.dynamic span {
  position: absolute;
  display: block;
  height: 2px;
  width: calc(100% - 10px);
  background-color: black;
}

.dynamic span:first-child {
  top: 5px;
  animation: dynamic-span1 1s forwards;
}

.dynamic span:nth-child(2) {
  top: 50%;
  animation: dynamic-span2 1s ease;
}

.dynamic span:last-child {
  bottom: 5px;
  animation: dynamic-span3 1s ease;
}

@keyframes dynamic-span1 {
  0% {
    transform: translateY(14px) rotate(45deg);
  }
  50% {
    transform: translateY(14px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes dynamic-span2 {
  0% {
    transform: translate(50px, -50%);
    opacity: 0;
  }
  50% {
    transform: translate(0, -50%);
    opacity: 0.5;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes dynamic-span3 {
  0% {
    transform: translateY(-14px) rotate(-45deg);
  }
  50% {
    transform: translateY(-14px) rotate(0);
  }
  100% {
    transform: translateY(0) rotate(0);
  }
}

.dynamic.open span:first-child {
  animation: open-dynamic-span1 1s forwards;
}

.dynamic.open span:nth-child(2) {
  animation: open-dynamic-span2 1s forwards;
}

.dynamic.open span:last-child {
  animation: open-dynamic-span3 1s forwards;
}

@keyframes open-dynamic-span1 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(14px) rotate(0);
  }
  100% {
    transform: translateY(14px) rotate(45deg);
  }
}

@keyframes open-dynamic-span2 {
  0% {
    transform: translate(0, -50%);
    opacity: 1;
  }
  50% {
    transform: translate(0, -50%);
    opacity: 0.5;
  }
  100% {
    transform: translate(-50px, 50%);
    opacity: 0;
  }
}

@keyframes open-dynamic-span3 {
  0% {
    transform: translateY(0) rotate(0);
  }
  50% {
    transform: translateY(-14px) rotate(0);
  }
  100% {
    transform: translateY(-14px) rotate(-45deg);
  }
}
$(".dynamic").click(function() {
  $(".dynamic").toggleClass("open");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-3.5.1.min.js