--- title: CSS Transitions slug: Web/CSS/CSS_Transitions translation_of: Web/CSS/CSS_Transitions --- <div>{{CSSRef}}{{SeeCompatTable}}</div> <p><strong>CSS Transitions</strong> is a module of CSS that defines how to create smooth transitions between values of given CSS properties. It allows to create them but also to define their evolution, using timing functions.</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="/en-US/docs/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></dt> <dd>Step-by-step tutorial about how to create smooth transitions using CSS. This article describes each relevant CSS property and explains how they interact.</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>Related to CSS Transitions, <a href="/en-US/docs/Web/CSS/CSS_Animations">CSS Animations</a> can trigger animations independently of value changes.</li> </ul>