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

 

概述

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)

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,