专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > CSS > 正文

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

作者:鹏仔先生日期:2020-06-02浏览:503分类:CSS


语法:

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: 加速运动


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

请填写验证码

关灯