动画的timing-function比较

animation-timing-function的参数：

值

属性

linear

动画从头至尾的速度是相同的

ease

默认，低速开始，加快，变慢结束

ease-in

动画以低速开始

ease-out

动画以词素结束

ease-in-out

动画以低速开始和结束

cubic-bezier(n,n,n,n)

在cubic-bezier函数中自己的值，可能是0-1

steps(n,start)

默认为end，动画帧之间跳跃步数

注：cubic-bezier即为贝兹曲线中的绘制方法 

         steps的设置都是针对两个关键帧之间的，而非是整个keyframes 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>动画的timing-function比较</title> 
<style> 
div
{
    width:100px;
    height:50px;
    background:red;
    color:white;
    font-weight:bold;
    position:relative;
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

#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;}
#div5 {animation-timing-function:ease-in-out;}
#div6 {animation-timing-function:cubic-bezier(0.5, 0, 1.0, 1.0);}
#div7 {animation-timing-function:cubic-bezier(0.5, 0, 1.0, 1.0);}


/* Safari and Chrome: */
#div1 {-webkit-animation-timing-function:linear;}
#div2 {-webkit-animation-timing-function:ease;}
#div3 {-webkit-animation-timing-function:ease-in;}
#div4 {-webkit-animation-timing-function:ease-out;}
#div5 {-webkit-animation-timing-function:ease-in-out;}
#div6 {-webkit-animation-timing-function:cubic-bezier(0.5, 0, 1.0, 1.0);}
#div7 {-webkit-animation-timing-function:cubic-bezier(0.5, 0, 1.0, 1.0);}

@keyframes mymove
{
    from {left:0px;}
    to {left:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
    from {left:0px;}
    to {left:300px;}
}
</style>
</head>
<body>

<p>animation-timing-funtion属性比较</p>

<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>
<div id="div6">贝兹曲线</div>
<div id="div7">cubic-bezier(0.0, 0.0, 1.0, 1.0)</div>

</body>
</html>

 

posted @ 2016-11-22 12:29  micale  阅读(598)  评论(0)  编辑  收藏  举报