files/zh-cn/web/css/transition/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106

---
title: transition
slug: Web/CSS/transition
tags:
  - CSS
  - CSS Property
  - CSS Transitions
  - transition
translation_of: Web/CSS/transition
---
<p>{{CSSRef}}</p>

<p><strong><code>transition</code> </strong><a href="https://developer.mozilla.org/en/CSS" title="CSS">CSS</a> 属性是 {{ cssxref("transition-property") }}，{{ cssxref("transition-duration") }}，{{ cssxref("transition-timing-function") }} 和 {{ cssxref("transition-delay") }} 的一个<a href="/en-US/docs/CSS/Shorthand_properties" title="/en-US/docs/CSS/Shorthand_properties">简写属性</a>。</p>

<div>{{EmbedInteractiveExample("pages/css/transition.html")}}</div>


<p>过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换，像是 {{cssxref(":hover")}}，{{cssxref(":active")}} 或者通过 JavaScript 实现的状态变化。</p>

<h2 id="语法">语法</h2>

<pre class="brush:css no-line-numbers">/* Apply to 1 property */
/* property name | duration */
transition: margin-right 4s;

/* property name | duration | delay */
transition: margin-right 4s 1s;

/* property name | duration | timing function */
transition: margin-right 4s ease-in-out;

/* property name | duration | timing function | delay */
transition: margin-right 4s ease-in-out 1s;

/* Apply to 2 properties */
transition: margin-right 4s, color 1s;

/* Apply to all changed properties */
transition: all 0.5s ease-out;

/* Global values */
transition: inherit;
transition: initial;
transition: unset;
</pre>

<p><code>transition</code>属性可以被指定为一个或多个 CSS 属性的过渡效果，多个属性之间用逗号进行分隔。</p>

<p>每个单属性转换都描述了应该应用于单个属性的转换（或特殊值<code>all</code>和<code>none</code>）。 这包括：</p>

<ul>
 <li>零或一个值，表示转换应适用的属性。 这可能是以下任何一种：
  <ul>
   <li>关键字<code>none</code></li>
   <li>关键字<code>all</code></li>
   <li>命名 CSS 属性的 {{cssxref("&lt;custom-ident&gt;")}} 。</li>
  </ul>
 </li>
 <li>零或一个 {{cssxref("&lt;single-transition-timing-function&gt;")}} 值表示要使用的过渡函数</li>
 <li>零，一或两个 {{cssxref("&lt;time&gt;")}} 值。可以解析为时间的第一个值被分配给 {{cssxref("transition-duration")}}，并且可以解析为时间的第二个值被分配给{{cssxref("transition-delay")}}。</li>
</ul>

<p>请查看“<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions#When_property_value_lists_are_of_different_lengths" title="en/CSS/CSS transitions#When property value lists are of different lengths">如何处理</a>”以了解当<code>transition</code>属性的值个数超过可以接收的值的个数时该如何处理。简而言之，当<code>transition</code>属性的值个数超过可以接收的值的个数时，多余的值都会被忽略掉，不再进行解析。</p>

<h3 id="标准语法">标准语法</h3>

{{csssyntax}}

<h2 id="示例">示例</h2>

<p>“<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions" title="en/CSS/CSS transitions">使用 CSS 过渡</a>” 一文中还包含了几个 CSS 过渡示例。</p>

<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', '#transition', 'transition') }}</td>
   <td>{{ Spec2('CSS3 Transitions') }}</td>
   <td> </td>
  </tr>
 </tbody>
</table>

<p>{{cssinfo}}</p>

<h2 id="浏览器兼容性">浏览器兼容性</h2>


<p>{{Compat("css.properties.transition")}}</p>

<h2 id="参见">参见</h2>

<ul>
 <li><a href="/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">Using CSS transitions</a></li>
 <li>{{ domxref("TransitionEvent") }}</li>
</ul>