모달에서 "x" 버튼을 클릭하면 애니메이션이 발생하기를 원하지만 현재는 모달이 버튼 없이 닫히고 모달을 다시 열면 아무 것도 클릭하지 않고 애니메이션이 발생합니다.

현재 애니메이션 클래스 코드는 다음과 같습니다.

이것은 내 JavaScript 코드입니다:

.scale-out-center {
   -webkit-animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    animation: scale-out-center 0.3s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
    }

@-webkit-keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}
@keyframes scale-out-center {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    opacity: 1;
  }
}