• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • transition-property

    版本:CSS3

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

    示例

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

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    IE10以上浏览器都支持transition-property

    语法

    transition-property:none| all| <IDENT>

    取值

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

    说明:

    检索或设置对象中的参与过渡的属性。

    • 默认值为:all。默认为所有可以进行过渡的css属性。
    • 如果提供多个属性值,以逗号进行分隔。
    • 对应的脚本特性为transitionProperty
    默认值all
    适用于所有元素,包含伪对象:after:before
    继承性
    动画性
    计算值指定值
    媒体视觉

    有过渡效果的属性:

    属性名称类型
    transformall
    background-colorcolor
    background-imageonly gradients
    background-positionpercentage, length
    border-bottom-colorcolor
    border-bottom-widthlength
    border-colorcolor
    border-left-colorcolor
    border-left-widthlength
    border-right-colorcolor
    border-right-widthlength
    border-spacinglength
    border-top-colorcolor
    border-top-widthlength
    border-widthlength
    bottomlength, percentage
    colorcolor
    croprectangle
    font-sizelength, percentage
    font-weightnumber
    grid-*various
    heightlength, percentage
    leftlength, percentage
    letter-spacinglength
    line-heightnumber, length, percentage
    margin-bottomlength
    margin-leftlength
    margin-rightlength
    margin-toplength
    max-heightlength, percentage
    max-widthlength, percentage
    min-heightlength, percentage
    min-widthlength, percentage
    opacitynumber
    outline-colorcolor
    outline-offsetinteger
    outline-widthlength
    padding-bottomlength
    padding-leftlength
    padding-rightlength
    padding-toplength
    rightlength, percentage
    text-indentlength, percentage
    text-shadowshadow
    toplength, percentage
    vertical-alignkeywords, length, percentage
    visibilityvisibility
    widthlength, percentage
    word-spacinglength, percentage
    z-indexinteger
    zoomnumber

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

    实例

    div{
    transition-property:width;
    -moz-transition-property:width;/*firefox4*/
    -webkit-transition-property:width;/*safari and chrome*/
    -o-transition-property:width;/*opera*/
    }
    
    div:hover{width:300px;}
    

    上篇:transition

    下篇:transition-duration