1. 개발자를 위한 웹 기술
  2. CSS
  3. CSS 참고서
  4. Properties
  5. transition-property

This page was translated from English by the community. Learn more and join the MDN Web Docs community.

View in English Always switch to English

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 2015년 9월.

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

시도해 보기

transition-property: margin-right;

transition-property: margin-right, color;

transition-property: all;

transition-property: none;

<section id="default-example">
  <div id="example-element">Hover to see<br />the transition.</div>
</section>

#example-element {
  background-color: #e4f0f5;
  color: #000;
  padding: 1rem;
  border-radius: 0.5rem;
  font: 1em monospace;
  width: 100%;
  transition: margin-right 2s;
}

#default-example:hover > #example-element {
  background-color: #909;
  color: #fff;
  margin-right: 40%;
}

단축 속성을 지정하면 (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>
이 구문은 CSS Transitions Module Level 1에 따른 최신 표준을 반영합니다. 모든 브라우저가 모든 부분을 구현한 것은 아닙니다. 지원 정보는 브라우저 호환성을 참조하세요.

예제

기본 예제

버튼을 호버하거나 포커싱하면, 1초 동안 색상이 트랜지션됩니다. 여기서 transition-property는 background-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 Module Level 1
# transition-property-property

브라우저 호환성

같이 보기

Help improve MDN

Learn how to contribute

This page was last modified on by MDN contributors.

View this page on GitHub • Report a problem with this content