[css] animation/@keyframes

css로 애니메이션 적용하기

.className {
  animation: keyName 2s ease forwards;
}

@keyframes keyName {
  0% {
    transform: translateY(-1px);
  }
  12% {
    transform: translateY(-5px);
  }
  25% {
    transform: translateY(-1px);
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

ease : cubic-bezier( 0.25, 0.1, 0.25, 1 )과 같다(기본값)
linear : cubic-bezier( 0, 0, 1, 1 )과 같다
ease-in : cubic-bezier( 0.42, 0, 1, 1 )과 같다
ease-out : cubic-bezier( 0, 0, 0.58, 1 )과 같다
ease-in-out : cubic-bezier( 0.42, 0, 0.58, 1 )과 같다
step-start : steps( 1, start )와 같다
step-end : steps( 1, end )와 같다
steps( n, start|end ) : n단계로 나누어서 변화시킨다. start 또는 end를 입력하지 않으면 end로 처리한다.
cubic-bezier( n, n, n, n ) : n에는 0부터 1까지의 수를 넣는다
initial : 기본값으로 설정한다
inherit : 부모 요소의 속성값을 상속받는다

참고할 사이트:
https://m.blog.naver.com/sudoku1/220868694364
https://webclub.tistory.com/621

---

transform의 기준 지정하기

transform-origin은 transform에서 사용되는 속성이며,
transform-origin 속성을 사용하여 확대/축소의 기준 위치를 지정할 수 있다.

transform-origin 속성은 x-value y-value로 구성되며, 각 값은 % 또는 px로 설정할 수 있다.
예를 들어, transform-origin: 50% 50%는 확대/축소의 기준을 요소의 중앙으로 설정한다.

<div class="box" style="transform: scaleX(2); transform-origin:0% 0%;"></div>