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 type	Not animatable

형식 구문

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

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

예제

기본 예제

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

HTML

html

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

CSS

html {
  height: 100vh;
}

button {
  font-size: 1.4rem;
  padding: 10px 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  outline: none;
}

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

브라우저 호환성

BCD tables only load in the browser