--- title: CSS Transitions slug: Web/CSS/CSS_Transitions tags: - CSS - CSS Transitions - Overview - Reference translation_of: Web/CSS/CSS_Transitions --- <div>{{CSSRef}}</div> <p><strong>CSS Transitions</strong>는 특정 CSS 속성의 값을 점진적으로 바꿀 수 있는 CSS 모듈입니다. 타이밍 함수, 시간 등 여러 속성을 통해 값이 바뀌는 방식을 조절할 수 있습니다.</p> <h2 id="참고서">참고서</h2> <h3 id="속성">속성</h3> <div class="index"> <ul> <li>{{cssxref("transition")}}</li> <li>{{cssxref("transition-delay")}}</li> <li>{{cssxref("transition-duration")}}</li> <li>{{cssxref("transition-property")}}</li> <li>{{cssxref("transition-timing-function")}}</li> </ul> </div> <h2 id="안내서">안내서</h2> <dl> <dt><a href="/ko/docs/Web/Guide/CSS/Using_CSS_transitions">CSS 트랜지션 사용하기</a></dt> <dd>CSS 트랜지션을 사용하는 법이 단계별로 적혀있습니다. 각각의 CSS 트랜지션 속성의 설명과, 서로 합치면 어떻게 동작하는지 설명합니다.</dd> </dl> <h2 id="명세">명세</h2> <table class="standard-table"> <thead> <tr> <th scope="col">Specification</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> </thead> <tbody> <tr> <td>{{SpecName('CSS3 Transitions')}}</td> <td>{{Spec2('CSS3 Transitions')}}</td> <td>Initial definition.</td> </tr> </tbody> </table> <h2 id="같이_보기">같이 보기</h2> <ul> <li><a href="/ko/docs/Web/CSS/CSS_Animations">CSS Animations</a>를 사용하면 값의 전환을 CSS Transitions보다 더 세밀하게 조절할 수 있습니다.</li> </ul>