[CSS] keyframes | slide-in, slide-out 만들기

평소에 CSS에는 관심이 많았지만,

animation에는 큰 관심이 없었다. 그런데 잘하고는 싶었다.

 

그래서 이번에 시간이 조금 남은 관계로 해보려고 간단하게 슬라이드로 화면이 들어오고 나가는 것을 구현해보았다.

 

배경과 modal 창을 가져올것이다.

keyframes 세팅

  @keyframes bg1_slideIn{
    from{
      left: -100%;
    }
    to{
      left: 0%;
    }
  }
  @keyframes bg1_slideOut{
    from{
      left: 0%;
    }
    to{
      left: -100%;
    }
  }
  
  @keyframes filter_box_slideIn{
    from{
      left: -100%;
    }
    to{
      left: 50%;
    }
  }
  @keyframes filter_box_slideOut{
    from{
      left: 50%;
    }
    to{
      left: -100%;
    }
  }

bg는 background의 이름,

filter_box는 background 위에 뜰 모달창의 이름이다.

 

각각 클래스 on, off에 넣어서 사용했다.

CSS 세팅

.filter_box{
	left: -100%;
    
    &.on{
      animation-delay: 250ms;
      animation-duration: 250ms;
      animation-name: filter_box_slideIn;
      animation-fill-mode: both;
    }
    &.off{
      animation-duration: 250ms;
      animation-name: filter_box_slideOut;
      animation-fill-mode: both;
    }
}

.bg1{
  left: -100%;
  
  &.on{
    animation-duration: 250ms;
    animation-name: bg1_slideIn;
    animation-fill-mode: both;
  }
  
  &.off{
    animation-delay: 400ms;
    animation-duration: 250ms;
    animation-name: bg1_slideOut;
    animation-fill-mode: both;
  }
}

 left: -100% 으로 시작해서   left:0 으로 배경을 움직이고,

 left: -100% 으로 시작해서   left:-50% 으로 모달을 움직일 것이다.

 

animation-name에는 keyframes로 만들어준 애니매이션의 이름을 넣으면 되고,

duration은 애니메이션 지속시간, delay는 몇초간 있다가 애니메이션이 실행되는지 정한다.

 

여기서 헷갈렸던 부분이  animation-fill-mode 인데 none | forwards | backwards | both 네가지 값이 있다.

forward로 설정해주면 keyframe으로 지정해놓은 100%일때의 css가 그대로 멈춰있고,

backward로 하면 처음 상태로 돌아간다.

 

bg와 modal이 없어질 때, css를 그대로 먹어야해서 forward로 해놓았는데,

on을 없애다보니 그 css가 없어졌다.

 

그래서  animation-fill-mode 의 값을 both로 하니 해결이 됐다.

 

하지만 바로 지우게되면 어쨌든 CSS가 없어지게 되는 것이니 setTimeout을 줘서 일정시간 후에 없애도록 했다.

반응형

JS 세팅

function openFilter(){
    $(".filter_box").removeClass('off');
    $(".bg1").removeClass('off');
    $(".filter_box").addClass('on');
    $(".bg1").addClass('on');
}

function closeFilter(){
    $(".filter_box").addClass('off');
    $(".bg1").addClass('off');
    setTimeout(function(){
        $(".filter_box").removeClass('on');
        $(".bg1").removeClass('on');
    }, 1000);
}

 

결국... 코드가 길긴 하지만 완성은 했다.

더 짧고 간단하게 jquery를 써서 만들수도 있었지만 기본 css,js로만 만들어보며 복습하고 싶어 만들어봤다.

 

원래 사용하던 JQUERY 코드

$(".filter_box").animate({width: "toggle"}, 150, "linear");
$(".bg1").animate({width: "toggle"}, 150, "linear");

다른 애니메이션이긴 하지만 jquery로 하면 한줄로 나타낼 수도 있다.

하지만 점점 사용하지 않는 추세에다가, 정말 간단한게 아니면 내가 정확하게 원하는 애니메이션이 있지는 않다.

 

따라서 알아두고 공부하고 연습해서 자유롭게 쓸 수 있도록... 해야겠다.

---

결론

간단한 애니매이션을 보고 아이디어를 얻고싶다면 아래 페이지에 좋은 자료가 많다.

보고 참고해서 스스로 만들어보면 많은 도움이 될 것 같다.

 

https://animate.style/

Animate.css

 

그리고 CSS animation의 MDN 문서

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Animations/Using_CSS_animations

CSS 애니메이션 사용하기

를 참고하여 문법에 맞게, 정확하게 사용하자.