|
|
|
|
|
CSS3 animation
動(dòng)畫屬性animation-timing-function
的值linear
、 ease
、 ease-in
、 ease-out
、 ease-in-out
,這5個(gè)屬性值都是規(guī)定動(dòng)畫的速度曲線,速度曲線定義動(dòng)畫從一套 CSS 樣式變?yōu)榱硪惶姿玫臅r(shí)間,速度曲線用于使變化更為平滑。
速度曲線的變化,這5個(gè)屬性值可這樣描述。
值 | 描述 |
---|---|
linear | 動(dòng)畫從頭到尾的速度是相同的。 |
ease | 默認(rèn)。動(dòng)畫以低速開始,然后加快,在結(jié)束前變慢。 |
ease-in | 動(dòng)畫以低速開始。 |
ease-out | 動(dòng)畫以低速結(jié)束。 |
ease-in-out | 動(dòng)畫以低速開始和結(jié)束。 |
我們可以從下圖一目了然的了解這5個(gè)屬性值的運(yùn)動(dòng)曲線的不同之處。
我們還可以更直觀的看到它們的動(dòng)畫效果。
上圖完整HTML代碼如下
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:50px;
background:red;
color:white;
font-weight:bold;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite;
}
#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;}
#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;}
@keyframes mymove
{
from {left:0px;}
to {left:300px;}
}
@-webkit-keyframes mymove
{
from {left:0px;}
to {left:300px;}
}
</style>
</head>
<body>
<p><strong>注釋:</strong>Internet Explorer 9 以及更早的版本不支持 animation-timing-function 屬性。</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>
</body>
</html>
若在JS中設(shè)置,那么可以使用如下的 JavaScript 語(yǔ)法:
object.style.animationTimingFunction="linear"