Css3过渡动画 transition 属性介绍以及使用

语法:

transition: 过渡属性 过渡时间 过渡方式 过渡延迟时间;

1. 过渡属性( transition-property )

    取值:

        all: 所有发生改变的css属性都添加过渡

        ident: 指定css属性过渡列表

        none: 没有css属性过渡

    eg:

transition: all 1s;
transition: transform 1s,background 2s;

2. 过渡时间( transition-duration )

    取值:

        0: 不执行过渡，直接看结果

        time: 指定动画执行的时间，单位s

3. 延迟时间( transition-delay )

    取值:

        0: 不延迟，正常执行动画

        正数: 按照延迟的时间执行动画

        负数: 设置时间之前的动画将会被截断

    eg:

transition: all 2s 1s;

4. 过渡方式( transition-timing-function )

    取值:

        ease: 默认值

        ease-out: 减速 运动

        linear: 匀速运动

        ease-in-out: 慢-快-慢

        ease-in: 加速运动

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓