|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
一圖理解animation屬性linear/ease/ease-in/ease-out/ease-in-out
作者:admin 時(shí)間:2022-3-15 19:11:31 瀏覽: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 語法：
object.style.animationTimingFunction="linear"
您可能對(duì)以下文章也感興趣
- 實(shí)例分析CSS3 transform: translateY() rotate() rotateY() rotateX()
- CSS3 transform: scale() 縮放轉(zhuǎn)換【實(shí)例分析演示】
- 純CSS實(shí)現(xiàn)的星光動(dòng)畫背景
- 8款CSS動(dòng)畫背景(飛揚(yáng)文字/旋轉(zhuǎn)方塊/粒子動(dòng)畫/彩色水滴。。。)
- 5款CSS動(dòng)畫背景(滑動(dòng)對(duì)角線/圖案無限滾動(dòng)/灰度三角形/閃爍星星)
- CSS動(dòng)畫背景-流星雨效果
- css滾動(dòng)星星效果/星空動(dòng)畫背景
- CSS粒子動(dòng)畫背景
- CSS動(dòng)畫背景-對(duì)角線顏色漸變
相關(guān)文章
x
- 站長推薦
