transition

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

Summary

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
상속no
Computed valueas each of the properties of the shorthand:
Animation typediscrete

Syntax

/* 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)

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

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

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

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

Examples

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

Specifications

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

Browser compatibility

BCD tables only load in the browser

See also