Css url
트랜지션
CSS 스타일 변경을 부드럽게 표현하기 위해 duration(지속시간)을 부여하여 속도를 조절
트랜지션 정의 순서
- 해당 요소에 추가할 스타일 전환(transition) 효과 설정
- 추가할 전환 효과가 지속될 시간 설정
트랜지션 프로퍼티
| 종류 | 의미 | 기본값 |
|---|---|---|
| transition-property | 트랜지션의 대상이 되는 CSS 프로퍼티를 지정 | all |
| transition-duration | 트랜지션이 일어나는 지속시간(duration)을 초 단위(s) 또는 밀리 초 단위(ms)로 지정 | 0s |
| transition-timing-function | 트랜지션 효과를 위한 수치 함수를 지정 | ease |
| transition-delay | 프로퍼티가 변화한 시점과 트랜지션이 실제로 시작하는 사이에 대기하는 시간을 초 단위(s) 또는 밀리 초 단위(ms)로 지정 | 0s |
| transition | 모든 트랜지션 프로퍼티 한번에 지정 |
트랜스폼
요소에 이동(translate), 회전(rotate), 확대축소(scale), 비틀기(skew) 효과를 부여하기 위한 함수 제공
| 종류 | 설명 | 단위 |
|---|---|---|
| translateX(n) | 요소의 위치를 X축으로 n만큼 이동 | px, %, em 등 |
| translateY(n) | 요소의 위치를 Y축으로 n만큼 이동 | px, %, em 등 |
| scaleX(n) | 요소의 크기를 X축으로 n배 확대 또는 축소 | 0, 양수 |
| scaleY(n) | 요소의 크기를 Y축으로 n배 확대 또는 축소 | 0, 양수 |
| skewX(x-angle) | 요소를 X축으로 x 각도만큼 기울기 | +/- 각도 |
| skewX(x-angle) | 요소를 Y축으로 x 각도만큼 기울기 | +/- 각도 |
| rotate(angle) | 요소를 angle만큼 회전 | +/- 각도 |
