[css] 요소에 애니메이션 효과 주기 - tranform/transition

transform

요소의 이동, 모양변화 등과 같은 요소의 변화를 줄 때 transform 속성을 사용한다.

하나씩 가장 많이 사용되는 속성들을 알아보자.

translate

요소의 x, y, z 값 이동

브라우저 윈도우에서 왼쪽위가 (0, 0)이고 오른쪽으로 x값이 커지고 아래로 y값이 커진다.

.box {
  transform: tranlateX(100px); // x축으로 100px 이동
  transform: tranlateY(100px); // y축으로 100px 이동
}

.box {
  transform: tranlate(100px, -50px); // x축으로 100px 이동, y축으로 -50px 이동
}

scale

요소의 크기 설정

.box {
  transform: scale(1.2); // 요소가 1.2배 커진다.
}

rotate

요소 회전

.box {
  transform: rotate(45deg); // 요소 45도 회전한다.
}

한번에 작성 가능

transform의 옵션들을 한번에 작성이 가능하다.

.box {
  transform: tranlate(100px, -50px) scale(1.2) rotate(45deg)
}

transition 애니메이션 효과

.box: hover {
  backgroud-color: blue;
  transition-property: backgroud-color; // transition할 속성 선택, 컬러가 변경될 때 transition 효과를 준다.
  transition-duration: 1000ms; // transition 효과를 몇초에 걸처서 보여줄지 설정한다.
  transition-timing-funciton: linear; // transition 효과를 선택한다.
}

.box: hover {
  backgroud-color: blue;
  border-radius: 50%
  transition: all 1000ms linear; // 하나의 형태로 작성이 가능하다.(속성, 기간, 효과) 순서
}

transition-timing-funciton의 속성들 자세히 알아보기