[쉘위헬스] CSS로 모달 창 띄울 시 애니메이션 적용

로그인버튼을 클릭 시 페이지 이동이 아닌 모달을 띄우기로 해서
모달을 띄웠을 때 투명도 애니메이션을 적용해서 띄우기로 했다

간단한 CSS 애니메이션을 적용했다

keyframes 작성방법

@keyframes 이름 {
	0% {
		CSS 속성: 값;
	}
	100% {
		CSS 속성: 값;
	}
}

적용한 애니메이션

@keyframes fadeIn {
  from {  
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.login-container .fadeIn {
  animation: fadeIn 0.7s;
}

from (0%) : 애니메이션 시작 부분
to (100%) : 애니메이션 종료부분
opacity: 투명도 조절

애니메이션 적용

<div className="login-modal fadeIn">