CSS - transition 속성 알아보기

트랜지션(transition)은 자바스크립트를 사용하지 않고 CSS만 이용하여 애니메이션을 구현하는 방법 중 하나로, 특정 CSS 속성 값을 일정 시간 동안 변경되도록 할 수 있는 속성이다.

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

 

 

트랜지션은 transition-property, transition-duration, transition-timing-function, transition-delay 4개의 상세 속성으로 이루어진다.

 

각 속성은 생략이 가능하며, 순서는 자유롭게 바꿔도 되지만 transition-duration이 transition-delay 속성 앞에 위치해야 한다.

 

사용 예시는 다음과 같다.

/*
  transition-property: all
  transition-duration: 0.3s
  transition-timing-function: ease-in-out
  transition-delay: 0s
*/
.box {
  transition: all .3s ease-in-out;
}

/*
  transition-property: width
  transition-duration: 0.3s
  transition-timing-function: linear
  transition-delay: 0s
*/
.box {
  transition: .3s linear width;
}

/*
  transition-property: all
  transition-duration: 0.5s
  transition-timing-function: ease
  transition-delay: 0s
*/
.box {
  transition: 500ms;
}

/*
  transition-property: all
  transition-duration: 0.3s
  transition-timing-function: ease
  transition-delay: 0.1s
*/
.box {
  transition: .3s .1s;
}

 

 

 

이제 각각의 속성에 대해 알아보자.

 

transition-property

transition-property은 트랜지션 이벤트를 적용할 CSS 속성을 지정하기 위해 사용되는 속성이다.

 

기본값은 all으로, 모든 속성에 트랜지션 이벤트가 적용된다.

값	설명
none	아무 속성도 지정하지 않음
all	모든 속성에 지정
css property명 (margin, width 등)	속성을 직접 지정 여러 개의 속성을 지정하고자 하는 경우에는 콤마(,)로 구분
initial	기본값 사용(all)
inherit	부모 요소로부터 값 상속

 

주의해야 할 점은 display, content와 같이 트랜지션 적용이 불가능한 CSS 속성들도 존재한다.

 

트랜지션 적용이 가능한 CSS 속성은 다음과 같다. (자주 사용되는 속성은 굵은 글씨로 표시했다.)

분류	속성
배경 관련 속성	backdrop-filter background background-color background-position background-size
border 관련 속성	border border-block-end border-block-end-color border-block-end-width border-block-start border-block-start-color border-block-start-width border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-width border-color border-end-end-radius border-end-start-radius border-image-outset border-image-slice border-image-width border-inline-end border-inline-end-color border-inline-end-width border-inline-start border-inline-start-color border-inline-start-width border-left border-left-color border-left-width border-radius border-right border-right-color border-right-width border-start-end-radius border-start-start-radius border-top border-top-color border-top-left-radius border-top-right-radius border-top-width border-width
flex 관련 속성	flex flex-basis flex-grow flex-shrink
grid 관련 속성	gap row-gap grid-column-gap grid-gap grid-row-gap grid-template-columns grid-template-rows column-count column-gap column-rule column-rule-color column-rule-width column-width columns order
margin & padding 관련 속성	margin margin-block-end margin-block-start margin-bottom margin-inline-end margin-inline-start margin-left margin-right margin-top padding padding-block-end padding-block-start padding-bottom padding-inline-end padding-inline-start padding-left padding-right padding-top
outline 관련 속성	outline outline-color outline-offset outline-width
폰트 & 텍스트 관련 속성	font font-size font-size-adjust font-stretch font-variation-settings font-weight text-decoration text-decoration-color text-decoration-thickness text-emphasis text-emphasis-color text-indent text-shadow text-underline-offset letter-spacing line-height word-spacing color
scroll 관련 속성	scroll-margin scroll-margin-block scroll-margin-block-end scroll-margin-block-start scroll-margin-bottom scroll-margin-inline scroll-margin-inline-end scroll-margin-inline-start scroll-margin-left scroll-margin-right scroll-margin-top scroll-padding scroll-padding-block scroll-padding-block-end scroll-padding-block-start scroll-padding-bottom scroll-padding-inline scroll-padding-inline-end scroll-padding-inline-start scroll-padding-left scroll-padding-right scroll-padding-top scroll-snap-coordinate scroll-snap-destination scrollbar-color
좌표 관련 속성	top bottom left right
박스 모델 관련 속성	box-shadow width height max-width max-height min-width min-height
이미지 관련 속성	filter mask mask-border mask-position mask-size clip clip-path object-position
공간(3D) & 회전 관련 속성	rotate scale transform transform-origin perspective perspective-origin
기타 속성	opacity tab-size zoom visibility z-index vertical-align caret-color accent-color block-size inline-size

 

 

transition-duration

transition-duration은 트랜지션 이벤트를 실행할 시간을 지정하기 위해 사용되는 속성이다.

 

기본값은 0초이고, s(초) 혹은 ms(밀리초) 단위의 값을 지정할 수 있다.

값	설명
time (s 혹은 ms)	s 혹은 ms(1ms = 1/1000s) 단위의 값 ex) 0.3s(0.3초), 500ms(0.5초)
initial	기본값 사용(0s)
inherit	부모 요소로부터 값 상속

 

만약 transition-property에 여러 개의 CSS 속성을 적용한 경우에는 transition-duration도 동일한 개수 만큼 지정하면 된다.

 

transition-property의 속성보다 많은 수의 transition-duration을 지정한 경우, 초과된 값은 무시된다.

// 올바른 케이스
.box1 {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 1s, 2s;
}

.box2 {
  transition: opacity 3s, left 5s, top 1s, height 2s;
}

// 올바르지 않은 케이스: transition-property에 지정한 속성은 2개이므로 1s, 2s 값은 무시됨
.box {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 1s, 2s;
}

 

 

transition-timing-function

transition-timing-function은 트랜지션 이벤트의 진행 속도를 지정할 수 있는 속성으로, 기본값은 ease이다.

 

사용 가능한 함수의 종류와 설명은 다음과 같다.

값	그래프	설명
linear	transition - linear 그래프	동일한 속도로 이벤트 진행 선형 그래프와 유사 cubic-bezier(0, 0, 1, 1)와 동일
ease		처음엔 천천히 시작했다가 중간에 빨라지고 마지막엔 느리게 진행 ease-in-out과 동일한 형태를 띄지만, ease-in-out 보다는 가파르게 진행 cubic-bezier(0.25, 0.1, 0.25, 1)와 동일
ease-in		처음엔 느리게 시작하다가 마지막엔 빠르게 진행 지수 그래프와 유사 cubic-bezier(0.42, 0, 1, 1)와 동일
ease-out		처음엔 빠르게 시작하다가 마지막엔 느리게 진행 로그 그래프와 유사 cubic-bezier(0, 0, 0.58, 1)와 동일
ease-in-out		처음엔 천천히 시작했다가 중간에 빨라지고 마지막엔 느리게 진행 ease와 동일한 형태를 띄지만, ease 보다는 완만하게 진행 cubic-bezier(0.42, 0, 0.58, 1)와 동일
steps(n, start | end)		duration 시간을 n으로 나눈 시간을 간격으로 n번 동안 비연속적인 트랜지션 진행 start는 간격의 시작, end는 간격의 끝에서 트랜지션 실행
step-start		steps(1, start)와 동일
step-end		steps(1, end)와 동일
cubic-bezier(x1, y1, x2, y2)		x1, y1, x2, y2에 해당하는 숫자를 넣어서 베지어 곡선을 그리고 해당 곡선을 따라 트랜지션 진행
initial		기본값 사용(ease)
inherit		부모 요소로부터 값 상속

 

속도 비교를 위해 각 함수별로 3초간 트랜지션 이벤트가 동작하는 예제를 만들어 보았다.

See the Pen transition by MiJeong Kim (@sap03110) on CodePen.

 

 

 

 

 

transition-delay

transition-delay는 트랜지션 이벤트를 바로 실행시키지 않고 지연시키고자 하는 경우에 사용하는 속성이다.

 

기본값은 0초이며, transition-duration과 동일한 값을 사용할 수 있다.

값	설명
time (s 혹은 ms)	s 혹은 ms(1ms = 1/1000s) 단위의 값 ex) 0.3s(0.3초), 500ms(0.5초)
initial	기본값 사용(0s)
inherit	부모 요소로부터 값 상속

 

transition-delay 값을 적절하게 지정하면 여러 개의 트랜지션을 순차적으로 하나씩 실행할 수도 있다.

 

다음은 opened 클래스가 추가되는 경우 background-color -> width 순서로 트랜지션이 실행되고, opened 클래스가 제거되는 경우 width -> background-color 순서로 트랜지션이 실행되는 CSS 코드이다.

.line {
  width: 80px;
  height: 8px;
  border-radius: 3px;
  transition: width 0.3s, background-color 0.3s 0.3s;
  background-color: #fff;
  margin: 0 auto;
}

&.opened .line {
  width: 0;
  transition: width 0.3s 0.3s, background-color 0.3s;
  background-color: #111;
}

 

실행 결과는 다음과 같다.

See the Pen hamburger toggle button by MiJeong Kim (@sap03110) on CodePen.

 

 

 

 

 

 

또한, 자바스크립트에서 transitionend 이벤트를 통해 트랜지션의 완료 여부를 감지할 수 있다.

 

다음과 같이 트랜지션 이벤트가 적용된 DOM 요소에 transitionend 이벤트를 부착하면 된다.

const element = document.querySelector('.box');
const handleTransitionEnd = () => {
  // 여기에 트랜지션 완료 후 실행할 코드 입력
  console.log('complete!');
};

element.addEventListener('transitionend', handleTransitionEnd);

 

 

 

참고 자료

CSS transition Property

CSS 트랜지션 사용하기 - CSS: Cascading Style Sheets | MDN

cubic-bezier.com