transition-property

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

transition-property CSS 속성은 transition effect 을 적용해야 하는 CSS 속성을 명시합니다.

시도해보기

단축 속성을 지정하면 (e.g., background), 애니메이션 가능한 모든 세부 속성이 지정됩니다.

구문

css
/* Keyword values */
transition-property: none;
transition-property: all;

/* <custom-ident> values */
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;

/* Multiple values */
transition-property: test1, animation4;
transition-property: all, height, color;
transition-property:
  all,
  -moz-specific,
  sliding;

/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: revert;
transition-property: revert-layer;
transition-property: unset;

none

어떤 속성도 트랜지션되지 않습니다.

all

트랜지션 가능한 모든 속성은 트랜지션됩니다.

<custom-ident>

값이 변경될 때 트랜지션 효과를 적용할 속성을 식별하는 문자열입니다.

형식 정의

초기값all
적용대상all elements, ::before and ::after pseudo-elements
상속no
계산 값as specified
Animation typeNot animatable

형식 구문

transition-property = 
none |
<single-transition-property>#

<single-transition-property> =
all |
<custom-ident>

예제

기본 예제

버튼을 호버하거나 포커싱하면, 1초 동안 색상이 트랜지션됩니다. 여기서 transition-propertybackground-color입니다.

HTML

html
<button class="target">Focus me!</button>

CSS

css
.target {
  transition-property: background-color;
  transition-duration: 1s;
  background-color: #ccc;
}

.target:hover,
.target:focus {
  background-color: #eee;
}

더 많은 transition-property 예제는 Using CSS transitions에서 확인할 수 있습니다.

명세서

Specification
CSS Transitions
# transition-property-property

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
transition-property
IDENT value
all
none

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Requires a vendor prefix or different name for use.
Has more compatibility info.

같이 보기