在CSS3中，我们可以使用animation-timing-function属性来定义动画的动画方式。所谓“动画方式”，指的是动画在过渡时间内的速率变化方式。

语法：

animation-timing-function: 取值;

说明：

animation-timing-function属性取值共有5种，这个跟CSS3过渡的 transition-timing-function是一样的，如下表所示。

animation-timing-function属性取值
属性值 说明 速率
ease 默认值，由快到慢，逐渐变慢
linear 匀速
ease-in 速度越来越快（即渐显效果）
ease-out 速度越来越慢（即渐隐效果）
ease-in-out 先加速后减速（即渐显渐隐效果）

举例：

在线测试
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        /*定义动画*/
        @keyframes mytransform
        {
            0%{ }
            100%{width:300px;}
        }
        div
        {
            width:100px;
            height:50px;
            line-height:50px;
            text-align:center;
            margin-top:10px;
            border-radius:0;
            background-color:lightskyblue;
            /*调用动画*/
            animation-name:mytransform;
            animation-duration:5s;
        }
        #div1{animation-timing-function:linear;}
        #div2{animation-timing-function:ease;}
        #div3{animation-timing-function:ease-in;}
        #div4{animation-timing-function:ease-out;}
        #div5{animation-timing-function:ease-in-out}
    </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>

浏览器预览效果如下图所示。

分析：

通过这个例子，可以直观地比较出这5种动画方式的不同。在实际开发中，我们可以根据实际需求来选取哪一种。