TIL: CSS - display:none

display: none 일 때 animation 효과를 사용할 수 없다.
visibility 또한 마찬가지이다.

배운 점 :

opacity를 조절해준다.

.disappear {
  animation: fade-out 1s;
  animation-fill-mode: forwards;
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

요소를 표시할 수 있으나 공간을차지하고 클릭을 함에 따라 다르다.

참고 블로그:
https://blog.hyungsub.com/entry/display-none%EC%97%90-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0

https://jmjmjm.tistory.com/28