好得很程序员自学网

<tfoot draggable='sEl'></tfoot>

transition-property

CSS transition-property 属性用于指定过渡动画的属性名称。

可以为 transition-property 指定一个或多个值,多个值之间使用逗号来分隔。多个动画属性名称会和其它过渡动画属性一一对应。例如,如果你提供了2个动画属性名称,那么第一个 transition-property 会与第一个 transition-duration 属性相对应,第二个 transition-property 会与第二个 transition-duration 属性相对应。

如果你指定的动画属性名称列表中有某个属性是错误的,或者该属性不可执行动画,则该属性仍然会保留在列表中,与其它相应位置的过渡动画属性相匹配,而不是会被剔除。

不是所有的CSS属性都可以执行动画效果,具体的可以参考W3C的。

官方语法
transition-property: none | <single-transition-property> [ ',' <single-transition-property> ]*

参数:

none :没有CSS属性被指定要执行过渡动画。 all :指定所有的属性都执行过渡动画。 <single-transition-property> :一个或多个要执行过渡动画的CSS属性名称。多个属性名称之间使用逗号来分隔。

transition-property 属性的初始值为 all 。

应用范围

transition-property 属性可以应用所有元素,以及 :before 和 :after 伪元素上。

示例代码
transition-property: color;
transition-property: background-color;
transition-property: left, top;
transition-property: transform, color, background-color;
transition-property: letter-spacing, font-size, line-height;
在线演示

下面的例子演示了元素在0.5秒、1秒和2秒时间内分别完成 left 和 background-color 两个属性的过渡动画。

0.5s

1s

2s

浏览器支持

CSS3 transition-property 属性的浏览器兼容性列表如下:

查看更多关于transition-property的详细内容...

  阅读:37次

上一篇: position

下一篇:perspective-origin

CopyRight:2016-2025好得很程序员自学网 备案ICP:湘ICP备09009000号-16 http://haodehen.cn
本站资讯不构成任何建议,仅限于个人分享,参考须谨慎!
本网站对有关资料所引致的错误、不确或遗漏,概不负任何法律责任。
本网站刊载的所有内容(包括但不仅限文字、图片、LOGO、音频、视频、软件、程序等)版权归原作者所有。任何单位或个人认为本网站中的内容可能涉嫌侵犯其知识产权或存在不实内容时,请及时通知本站,予以删除。

网站内容来源于网络分享,如有侵权发邮箱到:kenbest@126.com,收到邮件我们会即时下线处理。
网站框架支持:HDHCMS   51LA统计 百度统计
Copyright © 2018-2025 「好得很程序员自学网
[ SiteMap ]