transition-property

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

概述

transition-property 指定应用过渡属性的名称。

注意:可被用于动画的属性集合文章近期将会变更,应该避免使用列表中出现的但目前没有动画的属性。否则,将会出现一些不可预料的结果。

如果指定简写属性(比如 background),那么其完整版中所有可以动画的属性都会被应用过渡。

初始值all
适用元素all elements, ::before and ::after pseudo-elements
是否是继承属性
适用媒体visual
计算值as specified
是否适用于 CSS 动画
正规顺序the unique non-ambiguous order defined by the formal grammar

语法

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

none
没有过渡动画。
all
所有可被动画的属性都表现出过渡动画。
IDENT
属性名称。由小写字母 az,数字 09,下划线(_)和破折号(-)。第一个非破折号字符不能是数字。同时,不能以两个破折号开头。

正式语法

none | <single-transition-property>#

where
<single-transition-property> = all | IDENT

示例

在 CSS transitions 中有几个示例可以参考。

规范

规范 状态 备注
CSS Transitions
transition-property
Working Draft Initial definition

浏览器兼容

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) -webkit 4.0 (2.0) -moz
16.0 (16.0)
10 11.6-o
12.10 #
(Yes) -webkit
IDENT value (Yes) (Yes) (Yes) 12.10 未实现 未实现
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (Yes) -webkit (Yes) -webkit 4.0 (2.0) -moz
16.0 (16.0)
? ? (Yes) -webkit
IDENT value ? ? ? ? ? 未实现

参考

文档标签和贡献者

 此页面的贡献者: jiahui
 最后编辑者: jiahui,