Web速查-索引

Alt text

定义

transition-timing-function属性指定切换效果的速度。

语法

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);

属性值

值 说明
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 之间的数值。

实例

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鱼C-零基础入门学习Web（Html5+Css3）</title>

    <style>

        div

        {

            width:100px;

            height:50px;

            background:green;

            color:white;

            font-weight:bold;

            transition:width 3s;

            /* Safari */

            -webkit-transition:width 3s;

        }

        #div1 {transition-timing-function: linear;}

        #div2 {transition-timing-function: ease;}

        #div3 {transition-timing-function: ease-in;}

        #div4 {transition-timing-function: ease-out;}

        #div5 {transition-timing-function: ease-in-out;}

        /* Safari */

        #div1 {-webkit-transition-timing-function: linear;}

        #div2 {-webkit-transition-timing-function: ease;}

        #div3 {-webkit-transition-timing-function: ease-in;}

        #div4 {-webkit-transition-timing-function: ease-out;}

        #div5 {-webkit-transition-timing-function: ease-in-out;}

        div:hover

        {

            width:333px;

        }

    </style>

</head>

<body>

    <p>将鼠标移至相应块上即可查看过渡动画.</p>

    <div id="div1" style="top:100px">linear</div>

    <div id="div2" style="top:150px">ease</div>

    <div id="div3" style="top:200px">ease-in</div>

    <div id="div4" style="top:250px">ease-out</div>

    <div id="div5" style="top:300px">ease-in-out</div>

</body>

</html>

将鼠标移至相应块上即可查看过渡动画.

linear

ease

ease-in

ease-out

ease-in-out

上面的效果用cubic-bezier(n,n,n,n)同理可实现：

#div1 {transition-timing-function: cubic-bezier(0,0,1,1;}

#div2 {transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

/* Safari */

#div1 {-webkit-transition-timing-function: cubic-bezier(0,0,1,1;}

#div2 {-webkit-transition-timing-function: cubic-bezier(0.25,0.1,0.25,1);}

#div3 {-webkit-transition-timing-function: cubic-bezier(0.42,0,1,1);}

#div4 {-webkit-transition-timing-function: cubic-bezier(0,0,0.58,1);}

#div5 {-webkit-transition-timing-function: cubic-bezier(0.42,0,0.58,1);}

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

Safari Chrome FireFox IE
4.0 12.0 10.0 11.0