신버전 animation 만들기

• 애니메이션 만들기
  • UI를 꾸미는 css에 transition: all 1s를 설정한다.

.black-background {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 5;
  position: fixed;
  transition: all 1s;
}

• 클래스를 만들어서 transform:을 설정하고
• UI에 클래스를 넣어서 모습을 변화시킨다.

.slide-down {
  transform: translateY(-1500px);
}

<div class="black-background slide-down"></div>

• 이벤트를 설정하고, 클래스를 입력하거나, 제거하는 방식으로 모습의 변화를 준다.

$(".login-btn").on("click", function () {
  $(".black-background").removeClass("slide-down");
});

$("#close-login").on("click", function () {
  $(".black-background").addClass("slide-down");
});