CSS 트랜지션

트랜지션

웹 요소의 스타일 속성이 조금씩 자연스럽게 바뀌는것이다.

속성

property 속성

• 트랜지션을 적용할 속성을 선택한다.

기본형:
transition-property : all , none, 속성이름
ex)
transition-property: all; /* 모든 속성에 트랜지션 적용*/
transition-property: background-color; /* 배경 색에 트랜지션 적용 */
transition-property: width, height; /* 너비와 높이에 트랜지션 적용 */

duration 속성

• 트랜지션 진행 시간 지정한다.
• 시간 단위는 초 또는 밀리초
• 트랜지션이 여러 개라면 쉼표로 구분해 진행 시간 지정한다.

delay 속성

• 트랜지션이 언제부터 시작될지 지연 시간 지정한다.
• 시간 단위는 초 또는 밀리초. 기본값: 0