blob: 36a3372c14be292e04e77146f54c4022902a9e95 (
plain)
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
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
|
---
title: transition-property
slug: Web/CSS/transition-property
translation_of: Web/CSS/transition-property
---
<div>{{CSSRef("CSS Transitions")}} {{SeeCompatTable}}</div>
<h2 id="概述">概述</h2>
<p><strong><code>transition-property</code></strong> 指定应用过渡属性的名称。</p>
<div class="note"><strong>注意：</strong><a href="/en-US/docs/Web/CSS/CSS_animated_properties">可被用于动画的属性集合</a>文章近期将会变更，应该避免使用列表中出现的但目前没有动画的属性。否则，将会出现一些不可预料的结果。</div>
<p>如果指定简写属性（比如 {{cssxref("background")}}），那么其完整版中所有可以动画的属性都会被应用过渡。</p>
<div>{{cssinfo}}</div>
<h2 id="语法">语法</h2>
<pre class="brush: css">/* Keyword values */
transition-property: none;
transition-property: all;
transition-property: test_05;
transition-property: -specific;
transition-property: sliding-vertically;
transition-property: test1;
transition-property: test1, animation4;
transition-property: all, height, all;
transition-property: all, -moz-specific, sliding;
/* Global values */
transition-property: inherit;
transition-property: initial;
transition-property: unset;
</pre>
<h3 id="值">值</h3>
<dl>
<dt><code>none</code></dt>
<dd>没有过渡动画。</dd>
<dt><code>all</code></dt>
<dd>所有可被动画的属性都表现出过渡动画。</dd>
<dt><code>IDENT</code></dt>
<dd>属性名称。由小写字母 <code>a</code> 到 <code>z</code>，数字 <code>0</code> 到 <code>9</code>，下划线（<code>_</code>）和破折号（<code>-</code>）。第一个非破折号字符不能是数字。同时，不能以两个破折号开头。</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<p>在 <a href="/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions">CSS transitions</a> 中有几个示例可以参考。</p>
<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', '#transition-property', 'transition-property')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="浏览器兼容">浏览器兼容</h2>
<div>{{CompatibilityTable}}</div>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}</td>
<td>{{CompatGeckoDesktop("2.0")}} {{property_prefix("-moz")}}<br>
{{CompatGeckoDesktop("16.0")}}</td>
<td>10</td>
<td>11.6{{property_prefix("-o")}}<br>
12.10 <a href="http://my.opera.com/ODIN/blog/2012/08/03/a-hot-opera-12-50-summer-time-snapshot">#</a></td>
<td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}</td>
</tr>
<tr>
<td><code>IDENT value</code></td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatVersionUnknown}}</td>
<td>12.10 {{CompatNo}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Chrome for Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Mobile</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}</td>
<td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}</td>
<td>{{CompatGeckoMobile("2.0")}} {{property_prefix("-moz")}}<br>
{{CompatGeckoMobile("16.0")}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatVersionUnknown}} {{property_prefix("-webkit")}}</td>
</tr>
<tr>
<td><code>IDENT value</code></td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatUnknown}}</td>
<td>{{CompatNo}}</td>
</tr>
</tbody>
</table>
</div>
<h2 id="参考">参考</h2>
<ul>
<li><a href="/Web/Guide/CSS/Using_CSS_transitions">Using CSS transitions</a></li>
<li>{{domxref("TransitionEvent")}}</li>
</ul>
|
