Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

过渡属性 | transition-property

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

代码语言:javascript
复制
/* 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;

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

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

初始值

all

适用元素

all elements, ::before and ::after pseudo-elements

是否是继承属性

no

适用媒体

visual

计算值

as specified

Animation type

discrete

正规顺序

the unique non-ambiguous order defined by the formal grammar

语法

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

正式语法

代码语言:javascript
复制
none | <single-transition-property>#where 
<single-transition-property> = all | <custom-ident>

示例

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

规范

Specification

Status

Comment

CSS TransitionsThe definition of 'transition-property' in that specification.

Working Draft

Initial definition

浏览器兼容性

Feature

Chrome

Edge

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

(Yes) -webkit

(Yes)-webkit (Yes)

4.0 (2.0) -moz 16.0 (16.0)1

10

11.6-o 12.10 #

(Yes) -webkit

IDENT value

(Yes)

?

(Yes)

(Yes)

12.10 No support

No support

Feature

Android

Chrome for Android

Edge

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

(Yes) -webkit

(Yes) -webkit

(Yes)-webkit (Yes)

4.0 (2.0) -moz 16.0 (16.0)1

?

?

(Yes) -webkit

IDENT value

?

?

?

?

?

?

No support

除了支持无前缀外,Gecko 44.0(Firefox 44.0 / Thunderbird 44.0 / SeaMonkey 2.41)还增加了对该属性的-webkit前缀版本的支持,以解决layout.css.prefixes.webkit首选项(默认为false)的Web兼容性问题,因为Gecko 49.0(Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46),首选项默认为true。

扫码关注腾讯云开发者

领取腾讯云代金券