[CSS] Animation - Transition

냥이집사님의 Web-animation 노션을 보고 CSS Animation을 공부합니다.

 

 

Transition 이란?

transtion이란 CSS 속성값이 변할 때, 값의 변화가 일정 시간에 걸쳐 일어나도록 하는 것

transition: transition-property transition-duration transition-timing-function transition-delay

 

 

 

Transition의 속성들

transition - property

property

속성이란 뜻으로 어떤 속성에 transition 효과를 줄 지 설정해줄 수 있음

속성값(all, none, property, initial, inherit)으로
all: 기본값으로 모든 속성에 transition 효과를 적용
none: 속성들이 transition 효과를 받지 않음
property: transition 효과를 적용하고 싶은 CSS 속성을 지정
initial: 속성의 기본값
inherit: 부모 요소의 속성값 상속

.selector{-webkit-transition-property: width, height; /* Safari */
-webkit-transition-duration: 2s; /* Safari */
transition-property: width, height;
transition-duration: 2s;}

transition - duration

duration

지속이란 뜻으로 transition이 일어나는 지속시간을 설정해줄 수 있음
delay만 사용한 경우 일정 시간이 지난 후에 CSS 속성값이 확 변해 애니메이션 같은 효과를 가져올 수 없다.
초 단위를 나타내는 s나 밀리초를 나타내는 ms으로 나타낸다.
디폴트는 0s이나 transition의 효과가 나타나지 않는다.

transition - timing-function

timing-function

진행 속도를 설정할 수 있는 속성으로 값으로
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이 있다.

ease: 기본값으로 transition이 천천히 시작되어 빨라졌다가 다시 느려진다.
linear: transition이 처음부터 끝까지 일정한 속도로 진행한다.
ease-in: 천천히 시작한다.
ease-out: 천천히 끝난다.
ease-in-out: 천천히 시작해서 천천히 끝난다.
step-start: 시작하는 시점의 스템을 끊는다.
step-end: 끝나는 시점에 스텝을 끊는다.
steps(int, start|end): int 자리에 정수를 넣고
start나 end를 넣어주면 넣어준 int 값 만큼 시작이나 끝나는 시점에 스템을 끊어준다.
cubic-bezier(n, n, n, n): 베지어 곡선에 원하는 컨트롤 포인트를 직접 넣어줄 수 있다.
initial: 속성의 기본값을 적용한다.
inherit: 부모의 영향을 받아 적용된다.

transition - delay

delay

지연이란 뜻으로 transition이 일어날 때 얼마나 기다렸다가 실행할지 결정
초 단위를 나타내는 s나 밀리초를 나타내는 ms으로 나타낸다.
디폴트는 0s이고 딜레이 없이 transition이 바로 일어난다.
음수로 지정하면 절대값 시간만큼 기다렸다가 시작하게 된다.

transition

transition

transition 속성을 사용해 한 번에 적용시킬 수 있다.
순서는 delay property duration timing-function 순이다.

 

 

 

Transform

Transform 이란?

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

transform은 형태를 변형시킬 수 있는 다양한 속성들이 존재합니다.

scale, rotate, translate, skew, origin

scale: 크기 / 형태의 크기를 변환시킬 때 사용하는 속성으로 인자로 x축 y축 수치를 입력할 수 있으며,
1은 100%를 뜻한다.
rotate: 회전 / 형태를 회전시킬 때 사용하는 속성으로 deg를 이용해 360deg 처럼 표시하거나 1turn과 같은 단위로도 표시한다.
translate: 이동 / 형태를 x,y축 지점으로 이동시키는 값으로 x축 y축을 인자로 줄 수 있으며 보통 px와 같은 고정단위를 사용한다.
skew: 왜곡 / 형태를 비틀어 왜곡하는 속성으로 deg를 인자로 사용한다.
transform-origin: transform되는 Object의 기준점을 변경할 때 사용하며 기본값은 가운데지만 transform-origin을 사용하여 기준점을 변경할 수 있다.