|
|
|
|
|
|
一圖理解animation屬性linear/ease/ease-in/ease-out/ease-in-out
作者:admin 時間:2022-3-15 19:11:31 瀏覽:CSS3 animation動畫屬性animation-timing-function的值linear、 ease、 ease-in、 ease-out、 ease-in-out，這5個屬性值都是規定動畫的速度曲線，速度曲線定義動畫從一套 CSS 樣式變為另一套所用的時間，速度曲線用于使變化更為平滑。
速度曲線的變化，這5個屬性值可這樣描述。
| 值 | 描述 |
|---|---|
| linear | 動畫從頭到尾的速度是相同的。 |
| ease | 默認。動畫以低速開始，然后加快，在結束前變慢。 |
| ease-in | 動畫以低速開始。 |
| ease-out | 動畫以低速結束。 |
| ease-in-out | 動畫以低速開始和結束。 |
我們可以從下圖一目了然的了解這5個屬性值的運動曲線的不同之處。
我們還可以更直觀的看到它們的動畫效果。
上圖完整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中設置，那么可以使用如下的 JavaScript 語法：
object.style.animationTimingFunction="linear"
您可能對以下文章也感興趣
相關文章
x
