This is an experimental technology
Check the Browser compatibility table carefully before using this in production.


transition CSS 속성은 transition-property (en-US), transition-duration (en-US), transition-timing-function (en-US) 과 transition-delay를 위한 단축 속성입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있습니다. 엘리먼트의 각 상태는 가상 클래스 를 사용해 정의된 :hover 이나 :active 또는 자바스크립트를 사용해 동적으로 만들어진 것들입니다.

초기값as each of the properties of the shorthand:
적용대상all elements, ::before and ::after pseudo-elements
Computed valueas each of the properties of the shorthand:
Animation typediscrete


/* Apply to 1 property */
/* property name | duration */
transition: margin-left 4s;

/* property name | duration | delay */
transition: margin-left 4s 1s;

/* property name | duration | timing function | delay */
transition: margin-left 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-left 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;

이 속성에서 각 항목의 순서는 중요합니다: 시간으로 해석될 수 있는 값이 첫번째에 위치한다면 transition-duration (en-US) 로 적용되고, 두번째에 위치한다면 transition-delay 로 적용됩니다.

속성값 목록이 알맞은 길이를 갖지 않는다면 어떻게 처리될지 궁금하다면 속성값 목록이 다른 개수를 가진 경우를 참고하세요. 요컨대, 실제 속성의 개수보다 많이 기술된 것은 무시됩니다.

Formal syntax

<single-transition># (en-US)

<single-transition> = [ (en-US) none | (en-US) <single-transition-property> ] (en-US) || (en-US) <time> || (en-US) <easing-function> || (en-US) <time>

<single-transition-property> = all | (en-US) <custom-ident> (en-US)
<easing-function> = linear | (en-US) <cubic-bezier-timing-function> | (en-US) <step-timing-function>

<cubic-bezier-timing-function> = ease | (en-US) ease-in | (en-US) ease-out | (en-US) ease-in-out | (en-US) cubic-bezier([0,1] (en-US)>, <number>, [0,1] (en-US)>, <number>)
<step-timing-function> = step-start | (en-US) step-end | (en-US) steps(<integer>[ (en-US), <step-position>] (en-US)? (en-US))

<step-position> = jump-start | (en-US) jump-end | (en-US) jump-none | (en-US) jump-both | (en-US) start | (en-US) end


CSS 트랜지션 사용하기 에 다양한 CSS transition 예제가 있습니다.


Specification Status Comment
CSS Transitions
The definition of 'transition' in that specification.
Working Draft Initial definition

Browser compatibility

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 -webkit (en-US)
26.0 #
4.0 (2.0) -moz (en-US)
16.0 (16.0)[1]
10.0 10.1 -o (en-US)
12.10 #
3.0 -webkit (en-US)
Gradients[2] No support No support 10.0 No support No support
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 -webkit (en-US) 4.0 (2.0) -moz (en-US)
16.0 (16.0)[1]
10.0 10.0 -o (en-US)
12.10 #
3.2 -webkit (en-US)
Gradients[1] No support No support 10.0 No support No support

[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] PPK test

See also