[CSS] 모달창 나타나는 애니메이션 (fadeIn)

모달 부분에 'animation: fadeIn 시간' 을 추가한다.

fadeIn은 서서히 나타날 때, fadeOut은 서서히 사라질 때 쓰는 애니메이션이다.

그 다음, @keyframes fadeIn 안에 from, to(시작할 속성과 끝날 속성)을 적어준다.

그러면 animation에서 지정한 시간동안 from에서 to로 변하게 된다.

 

이 예제는 opacity: 0 (완전 투명), 크기 0.5 -> opacity: 1 (완전 뚜렷), 크기 1로 변하도록 애니메이션을 줘서

쫀득하게 모달창이 튀어나오는 효과를 준 것이다.

.modal {
  animation: fadeIn 400ms;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.5);
  } to {
    opacity: 1;
    transform: scale(1);
  }
}