[CSS] transform, transition

• transform 속성을 사용하여 효과를 주고,
  transition 속성으로 효과를 제어한다.

transform

요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.

• translate(a, b)
  x축으로 a만큼, y축으로 b만큼 움직인다.
  a가 음수면 왼쪽, 양수면 오른쪽으로 간다
  b가 음수면 위쪽, 양수면 아래쪽으로 간다.

• translateX, translateY
  한 축으로만 움직이고 싶을 때 사용한다.

• scale(a, b)
  가로길이에 a를, 세로길이에 b를 곱한다.

• scaleX(가로 길이에 곱하는 수), scaleY(세로 길이에 곱하는 수)

• rotate(각도)
  요소를 주어진 각도만큼 시계방향으로 회전시킨다.

transition

CSS 속성을 변경할 때 애니메이션 속도를 조절하는 방법을 제공한다.

움직이는 동적 효과를 주기 위해 사용한다.

• transition-property
  동적인 효과를 적용할 프로퍼티를 지정한다. (가로 길이, 세로 길이 등)

• transition-duration
  동적인 효과가 진행되는 시간을 지정한다.

• transition-timing-function
  효과의 진행속도를 조절한다. (점점 빠르게, 점점 느리게)

• transition-delay
  요청을 받은 후 실제 실행할 때까지 지연시간을 설정한다.