[CSS] class로 페이드 효과 넣어주기 fade-up fade-down

[CSS] 페이드 효과 넣어주기 fade-up fade-down

 
 

scss

up, 이나 down 등 여러가지 애니메이션 효과를 지정해 줄 수 있다.
해당 class 명을 사용해 원하는 곳에 넣어주면 된다.

.fade {
  &-up {
    opacity: 0;
    animation: fadeUp 1s ease forwards;
  }
  &-down{
    opacity: 0;
    animation: fadeDown 1s ease forwards;
  }
}​

 

css

forwards 설정을 넣어줌으로써 애니메이션 상태가 유지될 수 있도록 해준다.

.fade-up {
    opacity: 0;
    animation: fadeUp 1s ease forwards;
}​

 
 

animation

keyframes 를 지정한 후 0% - 100% 상태를 변경해준다.
이때 transform 을 사용해야 간결한 코드 사용이 가능하다(positoin 은 되도록 사용하지 말기)

@keyframes fadeUp {
  0% {
    transform: translateY(50px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}