reply transition example

<form class="reply">
      <div class="reply__column">
        <i class="far fa-plus-square fa-lg"></i>
      </div>
      <div class="reply__column">
        <input type="text" placeholder="Write a message..." />
        <i class="far fa-smile fa-lg"></i>
        <button><i class="fas fa-arrow-up"></i></button>
      </div>
</form>

/*reply안의 무언가가 focus되면 reply는 내려간다.*/
.reply {
  ...
  transition: transform 0.3s ease-in-out;
}
.reply:focus-within {
  transform: translateY(80px);
}

/*reply안의 무언가가 focus되면 reply의 첫번째 자식과
fasmile아이콘, 버튼은 opacity가 0이 된다.*/
.reply .reply__column:first-child,
.reply .fa-smile,
.reply button {
  transition: opacity 0.3s ease-in-out;
}
.reply:focus-within .reply__column:first-child,
.reply:focus-within .fa-smile,
.reply:focus-within button {
  opacity: 0;
}

/*input이 focus되면 width가 95vw로 바뀌면서
왼쪽으로 10퍼센트 늘어나고 위로 80px 올라간다.*/
.reply input {
  ...
  transition: all 0.3s ease-in-out;
}
.reply input:focus {
  width: 95vw;
  transform: translateX(-10%) translateY(-80px);
}

state selector 덕분에 reply 내부에 focus되어있는 element가 있는지 알 수 있다.
(reply안에 input이 선택되면 알 수 있음)