[Web/CSS] CSS - 트랜지션

✏️ 트랜지션(transition)

웹 요소의 배경색을 바꾸거나 도형의 테두리를 사각형에서 원형으로 바꾸는 것처럼 스타일 속성을 바꾸는 것

예를 들면 파란색 사각형 위에 마우스를 가져다대면 빨간색 사각형으로 바뀌는 것 등을 생각해 볼 수 있음

이런 식으로 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것을 의미

 

✏️ 트랜지션과 속성

종류	설명
transition-property	트랜지션의 대상을 설정
transition-duration	트랜지션의 실행 시간을 설정
transition-timing-function	트랜지션의 실행 형태를 지정
transition-delay	트랜지션의 지연 시간을 지정
transition	위의 속성들을 한꺼번에 지정

 

#1 트랜지션의 대상을 지정하는 transition-property 속성

기본형  => transtion-property: all | none | <속성 이름>

// 트랜지션을 만들기 위해서는 먼저 transition-property 속성을 이용하여 어떤 속성에 트랜지션을 적용할 것인지 대상 지정

종류	설명
all	all값을 사용하거나 transtion-property를 생략할 경우 요소의 모든 속성이 트랜지션의 대상, 기본값
none	트랜지션을 하는 동안 아무 속석도 바뀌지 않음
속성 이름	트랜지션 효과를 적용할 속성을 지정. 속성이 여러 개라면 콤마로 구분

 

#2 트랜지션의 진행 시간을 지정하는 transition-duration 속성

트랜지션의 대상을 지정했다면 진행 시간을 지정해야 속성이 자연스럽게 바뀌는 애니메이션 효과를 만들 수 있음, 지정할 수 있는 시간 단위는 초(second), 밀리초(milisecond)가 있음, 속성이 여러 개라면 콤마로 구분

기본형  => transtion-duration: <시간>

 

#3 트랜지션의 속도 곡선을 지정하는 transtion-timing-function 속성

트랜지션 효과의 시작, 중간, 끝에서 속도를 지정해 속도 곡선을 만들 수 있음 

미리 정해진 키워드나 배지에 곡선을 이용해 표현

기본형  => transition-timing-function : llinear | ease | ease-in | ease-out | ease-in-out | cubic-bezier(n,n,n,n)

종류	설명
letter	처음에는 천천히 시작하고 점점 빨라지다가 마지막에 천천히 끝냄, 기본값
linear	시작부터 끝까지 똑같은 속도로 진행
ease-in	느리게 시작
ease-out	느리게 끝냄
ease-in-out	느리게 시작하고 느리게 끝냄
cubic-bezier(n, n, n, n)	배지에 함수를 정의해서 사용, n값은 0~1사이만 가능

 

#4 트랜지션의 지연 시간을 설정하는 transition-delay 속성

효과를 언제부터 시작할 것인지 설정, 사용할 수 있는 값은 초(s)나 밀리초(ms)이며 기본값은 0

기본형  => transition-delay: <시간>

 

#5 트랜지션의 속성을 한꺼번에 표기하는 transition 속성

기본형  => transition: <transition-property값> | <transition-duration값> | <transition-timing-function값>| transition-delay값>