[CSS] transition

transition

요소의 움직임을 정의 할 수 있다.

 

transition-property : 트랜지션을 적용시킬 속성을 정한다.

ex) transition-property: background-color; (배경 색 속성을 트랜지션 함)

all : 모든 속성이 트랜지션 효과를 받는다.none : 트랜지션 효과를 주지 않는다.

transition-duration : 변화를 줄 시간을 정한다. 얼마동안 변화를 줄 것인지...!

transition-timing-function : 트랜지션의 진행 속도를 정한다.

transition-delay : 트랜지션의 시작을 연기한다.

transition-initial : 기본값으로 설정한다.

transition-inherit : 부모 요소의 속성값을 상속받는다.

 

속성을 너무 많이 써야하므로 아래 처럼 축약해서 써줄 수 있다.

timing-function 의 value

ease 

기본값. 천천히 시작해서 점점 빨라지고 마지막에는 다시 느려진다.

linear

처음부터 끝까지 일정한 속도로 진행된다.

ease-in

천천히 시작한다.

ease-out

천천히 끝난다.

ease-in-out

천천히 시작해서 천천히 끝난다.

cubic-bezier( n , n , n , n)

사용자가 정의한 cubic-bezier함수에 따라 진행된다.

아래 링크에서 내가 원하는 진행 속도를 만들 수 있다.

cubic-bezier.com

 

< 계단 함수값 >

step-start 

시작과 동시에 변한다.

step-end

끝나는 시점에서 변한다.

steps( 숫자, [ start or end ] )

지정해준 숫자만큼 단계별로 나누어 변화시킨다.

start로 설정한 경우 각 단계를 시작할 때, end로 설정 한 경우 각 단계가 끝날 때 변화 시킨다.

 

box1

box2

box3

box4

box5

ease

linear

ease-in

ease-out

ease-in-out

step-start

step-end

steps(4,start)

steps(4,end)