19、前端开发：CSS知识总结——transition过渡属性-CFANZ编程社区

1、前言

transition 属性设置元素当过渡效果，四个简写属性为：

transition-property 指定CSS属性的name，transition效果
transition-duration 指定过渡效果的持续时间
transition-timing-function 过度的时序函数
transition-delay 过渡效果延迟，等一段时间后再执行

2、transition-property 用法

<!DOCTYPE html>
        <html>
        <head>
        <meta charset="utf-8"> 
        <title>半壁为璜(runoob.com)</title> 
        <style> 
            div
            {
                width:100px;
                height:100px;
                background:red;
                transition-property: width;
                transition-duration: 2s;
                -webkit-transition-property: width; /* Safari */
                -webkit-transition-duration: 2s; /* Safari */
            }
            div:hover
            {
                width:300px;
            }
        </style>
        </head>
        <body>

            <p><b>注意:</b> 该属性不兼容 IE9以及更早版本的浏览器.</p>

            <div></div>

            <p>鼠标移动在块上查看动画效果.</p>

        </body>
    </html>

19、前端开发：CSS知识总结——transition过渡属性_过渡效果

3、transition-duration 用法

<style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        transition-property:width;
        transition-duration:5s;
        /* Safari */
        -webkit-transition-property:width;
        -webkit-transition-duration:5s;
    }

    div:hover
    {
        width:300px;
    }
</style>

4、transition-timing-function用法

可选值

值	描述
linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

steps()分布执行过渡效果

可设置一个第二个值

end，在时间结束时执行过渡（默认值）

start，在时间开始时执行过渡

transition-timing-function：step(2,start);

5、transition-delay用法

<style> 
    div
    {
        width:100px;
        height:100px;
        background:red;
        transition-property:width;
        transition-duration:5s;
        transition-delay:2s;

        /* Safari */
        -webkit-transition-property:width; 
        -webkit-transition-duration:5s;
        -webkit-transition-delay:2s;
    }

    div:hover
    {
        width:300px;
    }
</style>

注意：

transition可以同时设置过渡相关的所有属性，只有一个要求，如果要写延迟，则两个时间中的第一个是持续时间，第二个是延迟时间