트랜지션(transition)
트랜지션은 HTML 객체에 동작이 일어날 때 움직임의 속도를 부여하는 속성
ex) transition: all 1s linear 1s;
주로 사용되는 스타일 속성
- 위치 : top, right, bottom, left
- 크기 : width, height
- 여백 : margin, padding
- 테두리 : border, border-radius
- 색상 : color, background-color
- 투명도 : opacity
- 변환 : transform
트랜지션(transition) 속성
- transition-property: 변화를 적용할 CSS속성 지정
- transition-duration: 움직임의 전체 시간 지정(s)
- transition-timing-function: 움직임의 패턴
- transition-delay: 트랜지션이 적용 되기까지의 시간(s)
transition-timing-function
- ease : 시작과 끝은 천천히 중간은 빠르게
- linear : 일정한 속도
- ease-in : 시작은 천천히 끝은 빠르게
- ease-out : 시작은 빠르게 끝은 천천히
- ease-in-out : 시작과 끝은 천천히
