CSS Animation (애니메이션)

요소(element)에 적용되는 CSS 스타일을 다른 CSS 스타일로 부드럽게 전환시켜주는 기능 (*애니메이션 = CSS 스타일 + 키프레임)

1. 전환 (Transition)

CSS 속성 변경 시 애니메이션 속도를 제어하는 방법 제공 부드럽고 점진적인 움직임을 줄 때 사용

필수 속성	선택 속성
전환 속성값 (transition-property)	전환 타이밍 (transition-timing-function)
전환 시간 (transition-duration)	전환 지연 (transition-delay)

요소의 전상태, 후상태의 효과를 지정하는 단축속성

transition: 속성명 지속시간 타이밍함수 대기시간;

div {
	transition:
		속성명1 지속시간 타이밍함수 대기시간,
		속성명2 지속시간 타이밍함수 대기시간
}

transition-propery : 전환 효과를 사용할 CSS 속성 명시 all* , CSS propertry
transition-duration : 전환 효과의 지속 시간 0s* , 시간
transition-timing-function (= easing) ease* , linear , ease-in , ease-out , ease-in-out cubic-bezier(n, n, n, n) , steps(n)
transition-delay : 전화 효과의 대기 시간 0s* , 시간