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 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
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 |
브라우저 호환성
Loading…