Today, I Learned.
[멋쟁이 사자처럼 프론트엔드 스쿨]에서 배운 내용 정리.
- Transition.
- Transform.

✏️ Transition ✏️

Transition 이란?

transition 속성은 CSS 속성 값이 변할 때 일정 시간을 지연 시키거나 일정 시간에 걸쳐 일어나도록 한다.

transition을 구성하는 속성 값 구조는 다음과 같다.

/* 해당되는 요소의 모든 속성의 변화를 2초에 걸쳐 진행 */
transition: all 2s;

Transition의 속성

1. transition-delay

transition-delay 속성은 CSS 속성 값이 변할 때 일정 시간을 지연 시킨다.

/* 해당되는 요소의 변화를 1s 지연 */
transition-delay: 1s;

2. transition-duration

transition-duration 속성은 CSS 속성 값이 변할 때 일정 시간에 걸쳐 일어나도록 한다.

/* 해당되는 요소의 변화를 3s에 걸쳐 진행 */
transition-duration: 3s;

3. transition-property

transition-property 속성은 해당되는 CSS 속성 값만 변화를 준다.

/* 모든 속성 값 */
transition-property: all;
/* transition 변화를 주지 않음 */
transition-property: none;
/* 해당되는 속성 값 */
transition-property: width, height;

4. transition-timing-function

transition-timing-function 속성은 transition의 진행되는 속도를 제어한다.

속성값으로는 ease, linear, ease-in, ease-out, ease-in-out, step-start, step-end, steps(int, start|end), cubic-bezier(n, n, n, n), initial, inherit이 있다.

✏️ Transform ✏️

Transform 이란?

transform 속성은 객체를 여러 형태로 변형할 때 사용하는 속성으로, transition과 함께 사용하면 엄청난 효과를 낼 수 있다.

가장 많이 사용하는 속성 값은 다음과 같다.

Transform 속성

1. scale()

scale은 형태의 크기를 변환 시킬 때 사용하는 속성 값으로 width와 height를 늘렸을 경우엔 오른쪽 아래가 커지는 반면에 scale은 중심점이 가운데이기 때문에 가운데를 중심으로 커지는 효과를 나타낸다.

/* 해당되는 요소의 크기를 2배 */
transform: scale(2);

2. rotate()

rotate는 객체를 회전시킨다.

/* 해당되는 요소를 180도 회전 */
transform: rotate(180deg);

3. translate(x, y)

translate는 객체를 이동시킨다.

/* 해당되는 요소를 x축으로 50px, y축으로 50px 이동 */
transform: translate(50px, 50px);

4. skew()

skew는 객체를 외곡시킨다.

/* 해당되는 요소를 30도 외곡 */
transform: skew(30deg);

transform-origin

transform-origin 속성은 transform 기준점을 변경한다.
( default : 중앙 )

transform-origin: 0, 0;