transition ( 전환 ) 개요
- 선제 조건 - A -> B로 전환되는 시간 동안의 과정을 보여줌
- 시간 자료형이 사용 됨
transition-property
- 변경하고자 하는 속성을 선택
- 공백을 이용해 다중 선택 가능
transition-duration
- <time> 자료형을 사용, 변화되는 시간을 설정
- 숫자 뒤에 단위로 적용 s, m(밀리세컨) 사용
transition-delay
- <time> 자료형을 사용
- 변환되는 시작 시간을 지연시키는 속성
transition-timing-function
- 변화되는 중간 과정의 A -> B의 과정의 중간 시간을 변경
- 기본값 ease, linear, ease-in/out 등을 사용해 변경 가능
transition ( 단축 속성 )
- transition : property duration timing-functiondelay 한번에 적용 가능
- 시간 자료형 속성이 2개이므로 앞에 작성한 시간 자료형이 duration으로 작동
- transform으로 회전, 이동 등을 지정 후 transition 속성으로 이동 과정을 보여줄 수 있다.
- 다양한 애니메이션 이벤트를 추가할 수 있음
