transition 过渡

2 位贡献者:

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

Summary

transition 是一个简写属性,可设置 transition-property, transition-duration, transition-timing-functiontransition-delaytransition用来定义元素两种状态之间的过渡。不同状态可以用 pseudo-classes 定义,比如 :hover:active 或使用JavaScript设置。

  • 初始值 the concatenation of the initial values of its longhand properties:
    • transition-delay: 0s
    • transition-duration: 0s
    • transition-property: all
    • transition-timing-function: ease
  • 适用元素 all elements, ::before and ::after pseudo-elements
  • 可继承 no
  • 适用媒体 interactive
  • 计算值 as specified
  • 可动画 no
  • Canonical order order of appearance in the formal grammar of the values

Syntax

Formal syntax: [ none | <single-transition-property> ] || <time> || <timing-function> || <time>

当属性列表值不一样时如何处理,请查看“ When property value lists are of different lengths 。简短地说, extra transition descriptions beyond the number of properties actually being animated are ignored.

Examples

CSS transitions 一文包括几个过渡示例。

Specifications

Specification Status Comment
CSS Transitions
transition
Working Draft  

Browser compatibility

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 -webkit
26.0
4.0 (2.0) -moz
16.0 (16.0)
10.0 11.6 -o
12.10 #
3.0 -webkit
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 -webkit 4.0 (2.0) -moz
16.0 (16.0)
? 10.0 -o
12.10 #
3.2 -webkit

See also

文档标签和贡献者

向此页面作出贡献: teoli, yan
最后编辑者: teoli,