transition - 复合属性,设置过渡效果 - css 过度
transition
版本:CSS3
transition
CSS属性是transition-property
,transition-duration
,transition-timing-function
和transition-delay
的一个简写属性。过渡可以为一个元素在不同状态之间切换的时候定义不同的过渡效果。比如在不同的伪元素之间切换,像是:hover
,:active
或者通过 JavaScript 实现的状态变化。
示例
/* apply to 1 property */ /* property name | duration */ transition: margin-right 4s; /* property name | duration | delay */ transition: margin-right 4s 1s; /* property name | duration | timing function */ transition: margin-right 4s ease-in-out; /* property name | duration | timing function | delay */ transition: margin-right 4s ease-in-out 1s; /* apply to 2 properties */ transition: margin-right 4s, color 1s; /* apply to all changed properties */ transition: all 0.5s ease-out; /* global values */ transition: inherit; transition: initial; transition: unset;
浏览器支持
IE10以上浏览器都支持transition |
语法
transition:[,]*复合属性。检索或设置对象变换时的过渡。transition
属性可以被指定为一个或多个 CSS 属性的过渡效果,多个属性之间用逗号进行分隔。每个单属性转换都描述了应该应用于单个属性的转换(或特殊值all
和none
)。
取值:
=[none|all|transition-property
] ||transition-duration
||transition-timing-function
||transition-delay
transition-property
:检索或设置对象中的参与过渡的属性。零或一个值,表示转换应适用的属性。这可能是以下任何一种:关键字none、关键字all、命名 CSS 属性的指用户自定义字符串标识符。
transition-duration
:检索或设置对象过渡的持续时间。其值为。transition-timing-function
:检索或设置对象中过渡的动画类型。零或一个值,表示要使用的过渡函数。transition-delay
:检索或设置对象延迟过渡的时间。其值为。
注意:如果只提供一个参数,则为transition-duration
的值定义;如果提供二个参数,则第一个为transition-duration
的值定义,第二个为transition-delay
的值定义。
当transition
属性的值个数超过可以接收的值的个数时该如何处理。简而言之,当transition
属性的值个数超过可以接收的值的个数时,多余的值都会被忽略掉,不再进行解析。
初始值 | transition-delay: 0s transition-duration: 0s transition-property: all transition-timing-function: ease |
适用于 | 所有元素,包含伪对象:after 和:before |
继承性 | 无 |
动画类型 | discrete |
计算值 | transition-delay: as specified transition-duration: as specified transition-property: as specified transition-timing-function: as specified |
实例
可以为同一元素的多个属性定义过渡效果
缩写方式:
transition: border-color .5s ease-in .1s, background-color .5s ease-in .1s, color .5s ease-in .1s;
拆分方式:
transition-property: border-color, background-color, color; transition-duration:.5s,.5s,.5s; transition-timing-function: ease-in, ease-in, ease-in; transition-delay:.1s,.1s,.1s;
如果定义了多个过渡的属性,而其他属性只有一个参数值,则表明所有需要过渡的属性都应用同一个参数值。
拆分方式:
transition-property: border-color, background-color, color; transition-duration:.5s; transition-timing-function: ease-in; transition-delay:.1s;
如果需要定义多个过渡属性且不想指定具体是哪些属性过渡,同时其他属性只有一个参数值
缩写方式:
transition: all .5s ease-in .1s;
拆分方式:
transition-property:all; transition-duration:.5s; transition-timing-function: ease-in; transition-delay:.1s;
transition: margin-right 2s; transition: margin-right 2s .5s; transition: margin-right 2s ease-in-out; transition: margin-right 2s ease-in-out .5s; transition: margin-right 2s, color 1s; transition: all 1s ease-out;
div{ width:100px; transition:width 2s; -webkit-transition:width 2s; /*safari*/ } div:hover{width:300px;}
鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com
图片声明:本站部分配图来自网络。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!