1. 전환(Transitions)

CSS 속성의 시작과 끝을 지정(전환 효과)하여 중간 값을 애니메이션

[개별 속성]

• transition-property : 전환 효과를 사용할 속성 이름 (기본값 : all)

  transition-property: width, background

• transition-duration : 전환 효과의 지속시간 설정 (기본값 : 0s, 0ms)

  transition-duration: 1000ms

• transition-timing-function : 타이밍 함수 지정 (기본값 : ease)

  ease : 빠르게-느리게

  linear : 일정하게

  ease-in : 느리게-빠르게

  ease-out : 빠르게-느리게

  ease-in-out : 느리게-빠르게-느리게

  transition-timing-function: 1s linear

  steps(n) : n 번 분할 된 애니메이션

  transition-timing-function: 1s steps(4)

• transition-delay : 전환 효과의 대기시간 설정 (기본값 : 0s)

  transition-delay: 2s

[혼합 속성]

transition: width 1s linear 2s, background 1s linear 2s

transition: 500ms ease 1s

transition: 500ms 1s

transition: 500ms

2. 변환(Transform)

요소의 변환 효과(변형)를 지정

transform: 변환함수1 변환함수2 변환함수3 ... (변환함수 : 원근법, 이동, 회전, 크기, 기울임)

[2D 변환 함수]

• 이동(단위)

  tramsform: translate(x, y) / tramsform: translateX(x) / tramsform: translateY(y)