--- title: CSS 变换 slug: Web/CSS/CSS_Transitions tags: - CSS - CSS 变换 - 参考 - 实验功能 - 概述 translation_of: Web/CSS/CSS_Transitions --- <p>{{CSSRef}}{{SeeCompatTable}}</p> <p><strong>CSS Transitions</strong> 是一个 CSS 模块,定义了如何创建一个平滑地变换 CSS 属性值的方法。它不仅允许创建变换方法,同时也允许通过定时函数来控制变换方法。</p> <h2 id="参考">参考</h2> <h3 id="CSS_属性">CSS 属性</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">使用 CSS 变换</a></dt> <dd>本教程将手把手展现如何通过 CSS 创建一个平滑的变换方法,这篇文章描述了每个相关的 CSS 属性是如何互相影响的。</dd> </dl> <h2 id="文档">文档</h2> <table class="standard-table"> <thead> <tr> <th scope="col">文档</th> <th scope="col">状态</th> <th scope="col">注释</th> </tr> </thead> <tbody> <tr> <td>{{ SpecName('CSS3 Transitions') }}</td> <td>{{ Spec2('CSS3 Transitions') }}</td> <td>源定义文件。</td> </tr> </tbody> </table> <h2 id="sect1"> </h2> <h2 id="参见">参见</h2> <ul> <li>关于 CSS 变换,<a href="/en-US/docs/Web/CSS/CSS_Animations">CSS 动画</a> 可以通过独立的属性值的改变来触发动画。</li> </ul>