这篇翻译不完整。请帮忙从英语翻译这篇文章

 

概述

transition CSS 属性是一个简写属性,用于 transition-property, transition-duration, transition-timing-function, 和 transition-delay。  

CSS transform 属性 , 只对 block 级元素生效!

/* 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;

Transitions可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换,像是 :hover:active 或者通过JavaScript实现的状态变化。

初始值as each of the properties of the shorthand:
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
适用媒体interactive
计算值as each of the properties of the shorthand:
Animation typediscrete
正规顺序order of appearance in the formal grammar of the values

语法

注意:在transition属性中,各个值的书写顺序是很重要的:第一个可以解析为时间的值会被赋值给transition-duration,第二个可以解析为时间的值会被赋值给transition-delay

请查看“ When property value lists are of different lengths 以了解 当transition属性的值列表长度不一样时 该如何处理。简而言之,当transition属性的值列表长度超过了transition属性的值列表长度最大值之后,多余的值都会被忽略掉,不再进行解析(超出了实际被描绘的属性的数量 的其余过渡描述将被忽略掉。extra transition descriptions beyond the number of properties actually being animated are ignored.)。

标准语法

如何阅读 CSS 语法。

<single-transition>#

where
<single-transition> = [ none | <single-transition-property> ] || <time> || <single-transition-timing-function> || <time>

where
<single-transition-property> = all | <custom-ident>
<single-transition-timing-function> = <single-timing-function>

where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>

where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)

范例

CSS transitions 一文还有几个 CSS 过渡示例。

详述

Specification Status Comment
CSS Transitions
transition
Working Draft  

浏览器兼容(Browser compatibility)

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 -webkit
26.0 #
(Yes)-webkit
(Yes)
4.0 (2.0) -moz
16.0 (16.0)[1]
10.0 10.1 -o
12.10 #
3.0 -webkit
6.1
Gradients[2] 未实现 (Yes) 未实现 10.0 未实现 未实现
frames() timing function 未实现[3] ? 未实现[3] 未实现 未实现[3] ?
Feature Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 -webkit (Yes)-webkit
(Yes)
4.0 (2.0) -moz
16.0 (16.0)[1]
10.0 10.0 -o
12.10 #
3.2 -webkit
Gradients[1] 未实现 (Yes) 未实现 10.0 未实现 未实现
frames() timing function ? ? 未实现[3] 未实现 (Yes) ?

[1] In addition to the unprefixed support, Gecko 44.0 (Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41) added support for a -webkit prefixed version of the property for web compatibility reasons behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

[2] PPK test

[3] The name of the frames() timing function is currently under discussion, so it is currently disabled in browser release versions until a final decision is reached. It is currently turned on in Nightly/Canary only.

另见

 

 

文档标签和贡献者

标签: 
 最后编辑者: codedrinker,