현재 번역은 완벽하지 않습니다. 한국어로 문서 번역에 동참해주세요.
This is an experimental technology
Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers. Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers as the specification changes.
Summary
transition CSS 속성은 transition-property, transition-duration, transition-timing-function 과 transition-delay를 위한 단축 속성입니다. 이 속성으로 엘리먼트의 두 가지 상태 사이에 변화를 줄 수 있습니다. 엘리먼트의 각 상태는 가상 클래스 를 사용해 정의된 :hover 이나 :active 또는 자바스크립트를 사용해 동적으로 만들어진 것들입니다.
| 초기값 | as each of the properties of the shorthand: |
|---|---|
| 적용대상 | all elements, ::before and ::after pseudo-elements |
| 상속 | no |
| Media | interactive |
| Computed value | as each of the properties of the shorthand:
|
| Animatable | no |
| Canonical order | order of appearance in the formal grammar of the values |
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 로 적용되고, 두번째에 위치한다면 transition-delay 로 적용됩니다.
속성값 목록이 알맞은 길이를 갖지 않는다면 어떻게 처리될지 궁금하다면 속성값 목록이 다른 개수를 가진 경우를 참고하세요. 요컨대, 실제 속성의 개수보다 많이 기술된 것은 무시됩니다.
Formal syntax
<single-transition>#where
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>where
<single-transition-property> = all | IDENT
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
Examples
CSS 트랜지션 사용하기 에 다양한 CSS transition 예제가 있습니다.
Specifications
| Specification | Status | Comment |
|---|---|---|
| CSS Transitions The definition of 'transition' in that specification. |
Working Draft | Initial definition |
Browser compatibility
| Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Basic support | 1.0 -webkit 26.0 # |
4.0 (2.0) -moz 16.0 (16.0)[1] |
10.0 | 10.1 -o 12.10 # |
3.0 -webkit 6.1 |
| 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 | 4.0 (2.0) -moz 16.0 (16.0)[1] |
10.0 | 10.0 -o 12.10 # |
3.2 -webkit |
| 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