DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!
transition-property
属性通常用作 transition
简写的一部分,用于定义要应用过渡效果的属性或属性。
这是通过将属性名称作为值提供来完成的
.example {
transition-property: color;
}
值可以是以下之一
- 单个属性名称,如上面的示例所示
- 逗号分隔的属性名称列表(简写或完整写法),用于对单个元素上的多个属性进行过渡
- 关键字
none
,表示不进行任何属性过渡 - 关键字
all
,表示所有属性将进行过渡(默认值)
当用逗号分隔值时,属性名称实质上映射到定义的其他过渡属性(transition-timing-function
、transition-duration
和 transition-delay
)。 所以这意味着如果逗号分隔的属性列表包含一个或多个无效的属性名称,其他属性仍然会过渡,并且会映射到它们预期的相关过渡属性。
规范通过以下描述来描述这一点
“ [U] 不识别或不可动画的属性必须保留在列表中以保留索引的匹配。”
当使用 none
值或通用关键字 inherit
或 initial
时,这些值不能用作逗号分隔列表的一部分,否则会导致语法错误,整个行将被忽略。
为了在所有支持的浏览器中保持兼容性,需要供应商前缀,标准语法最后声明
.example {
-webkit-transition-property: color;
-moz-transition-property: color;
-o-transition-property: color;
transition-property: color;
}
IE10(第一个支持 transition-property
的稳定版 IE)不需要 -ms-
前缀。
相关属性
其他资源
浏览器支持
Chrome | Safari | Firefox | Opera | IE | Android | iOS |
---|---|---|---|---|---|---|
工作 | 工作 | 4+ | 10.5+ | 10+ | 2.1+ | 3.2+ |
你可以用过渡做一些很酷的事情,我在我的网站上的彩色按钮上使用了它。
问题:如何使用渐变颜色和过渡?
ewfwefew