1. transition 속성
ㅇ 모습/모양을 바꾸는(이행,전이,변형,재생 등) 효과를 주는 속성
- background,color,height,width,transform 등의 CSS 속성을,
- 정해준 시간 동안 또는 부드럽게 또는 빠르게 또는 점차적으로 변하도록 하는 속성
ㅇ 적용 가능 대상 속성
- 위치 : top, left, bottom, right
- 크기 : width, height
- 박스 : margin, padding
- 외곽선 : border-width, border-radius, border-color
- 색상 : color, background-color
- 투명도 : opacity
- 변환 : transform
ㅇ transition 속성의 구분
- transition-property : 어떤 속성들에 전환(변형,재생) 효과를 줄 것인가를 지정함
. 例) transition-property : transform;
- transition-duration : 몇 초 동안 전환(변형,재생)할 지를 지정
. 例) transition-duration: 2s; /* 2초 동안 변형 속성이 적용됨 */
- transition-timing-function : 변형 속도감을 지정
. linear : 등속
. ease : 빠른 실행을 한 다음에, 느린 종료
. ease-in : 점점 빨라짐
. ease-out : 점점 느려짐
. ease-in-out : 느린 시작, 보통 속도, 느린 종료
- transition-delay : 이벤트 발생 후 몇 초 후 전환(재생)할 지를 지정
- transition : 모든 transition 속성을 한번에 지정하는 단축 문법
. transition: <property> <duration> <timing-function> <delay>;
. 例) transition: width 2s, height 2s, background-color 2s, transform 2s;