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

 

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

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

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;

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

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

标准语法

如何阅读 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  

初始值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

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 26
Full support 26
Full support 1
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 57, transitions do not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (see bug 726550).
Notes Before Firefox 57, cancelling a filling animation (for example, with animation-fill-mode: forwards set) can trigger a transition set on the same element, although only once (see bug 1192592 and these test cases for more information).
Notes Before Firefox 57, the background-position property can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see bug 1390446).
Full support 4
Prefixed
Prefixed Requires the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE Full support 10Opera Full support 12.1
Full support 12.1
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 10.1 — 15
Prefixed
Prefixed Requires the vendor prefix: -o-
Safari Full support 6.1
Full support 6.1
Full support 3
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support Yes
Full support Yes
Full support 2
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Chrome Android Full support 26
Full support 26
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Edge Mobile Full support 12
Full support 12
Full support 12
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Firefox Android Full support 16
Notes
Full support 16
Notes
Notes Before Firefox 57, transitions do not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (see bug 726550).
Notes Before Firefox 57, cancelling a filling animation (for example, with animation-fill-mode: forwards set) can trigger a transition set on the same element, although only once (see bug 1192592 and these test cases for more information).
Notes Before Firefox 57, the background-position property can't be transitioned between two values containing different numbers of <position> values, for example background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (see bug 1390446).
Full support 4
Prefixed
Prefixed Requires the vendor prefix: -moz-
Full support 49
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Full support 44
Prefixed Disabled
Prefixed Requires the vendor prefix: -webkit-
Disabled From version 44: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1
Full support 12.1
Full support 15
Prefixed
Prefixed Requires the vendor prefix: -webkit-
No support 10.1 — 14
Prefixed
Prefixed Requires the vendor prefix: -o-
Safari iOS Full support Yes
Full support Yes
Full support 3.2
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android Full support Yes
Full support Yes
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Gradients
Experimental
Chrome No support NoEdge Full support 12Firefox No support NoIE Full support 10Opera No support NoSafari No support NoWebView Android No support NoChrome Android ? Edge Mobile Full support YesFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

另见

 

 

文档标签和贡献者

标签: 
最后编辑者: lingziyu,