animation-timing-function

定义

animation-timing-function指定动画按照何种速度曲线完成一个周期。

注意：速度曲线用于使变化更为平滑。

语法

animation-timing-function: value;

属性值

值	说明
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

实例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>NTHOME-零基础入门学习Web（HTML5+CSS3）</title>
    <style>
        div
        {
            width:100px;
            height:50px;
            background:green;
            color:white;
            font-weight:bold;
            position:relative;
            animation:1 5s infinite;
            /* Safari and Chrome */
            -webkit-animation:1 5s infinite;
        }
        #div1 {animation-timing-function:cubic-bezier(0,0,0.25,1);}
        #div2 {animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
        #div3 {animation-timing-function:cubic-bezier(0.42,0,1,1);}
        #div4 {animation-timing-function:cubic-bezier(0,0,0.58,1);}
        #div5 {animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
        /* Safari and Chrome: */
        #div1 {-webkit-animation-timing-function:cubic-bezier(0,0,0.25,1);}
        #div2 {-webkit-animation-timing-function:cubic-bezier(0.25,0.1,0.25,1);}
        #div3 {-webkit-animation-timing-function:cubic-bezier(0.42,0,1,1);}
        #div4 {-webkit-animation-timing-function:cubic-bezier(0,0,0.58,1);}
        #div5 {-webkit-animation-timing-function:cubic-bezier(0.42,0,0.58,1);}
        @keyframes 1
        {
            from {left:0px;}
            to {left:300px;}
        }
        @-webkit-keyframes 1 /* Safari and Chrome */
        {
            from {left:0px;}
            to {left:300px;}
        }
    </style>
</head>
<body>
    <div id="div1">linear</div>
    <div id="div2">ease</div>
    <div id="div3">ease-in</div>
    <div id="div4">ease-out</div>
    <div id="div5">ease-in-out</div>
</body>
</html>

浏览器支持

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

Safari	Chrome	FireFox	IE
4.0	4.0	4.0	10.0