国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

2019年了,你還不會CSS動畫?

Carbs / 3184人閱讀

摘要:然而我發現都年了,還有很多同學不會動畫。指定動畫計時函數,即動畫的速度曲線,默認是。指定動畫播放狀態,正在運行或暫停。除了默認值外,還有另外個值,表示,動畫完成后,元素狀態保持為最后一幀的狀態。

今年我面試了很多同學,只要看到簡歷上寫“熟練掌握CSS3”的,我都會問問動畫相關知識。然而我發現:都

2019 年了,還有很多同學不會

CSS 動畫。

我經常愛問的一個問題是,實現如下的效果:

即,一個小球從向右勻速移動

200px,然后移動回來,再移動過去,最后停留在

200px 處。

動圖效果如下:

就是需求這么簡單的一個動畫,然而絕大多數人卻不能答對。

不賣關子,我的答案是:

div{
??width:?40px;
??height:?40px;
??border-radius:?50%;
??background:?#0ff;
??animation:?move?2s?linear?3?alternate?both;
}
@keyframes?move{
??0%{
????transform:?translate(0,0);
??}
??100%{
????transform:?translate(200px,0);
??}
}

大部分面試者說,關于

CSS 動畫,也看過一些教程,工作中卻不怎么使用,因此就忘了。

這里,我準備為對

CSS 動畫掌握不深的小伙伴補充一下相關知識。歡迎大佬們拍板。

正文開始。

通過開發者工具可以發現,

animation(動畫)屬性是 8 個屬性的簡寫。

這 8 個屬性具體含義如下:

屬性 描述
animation-duration 指定動畫完成一個周期所需要時間,單位秒(s)或毫秒(ms),默認是 0。
animation-timing-function 指定動畫計時函數,即動畫的速度曲線,默認是 "ease"。
animation-delay 指定動畫延遲時間,即動畫何時開始,默認是 0。
animation-iteration-count 指定動畫播放的次數,默認是 1。
animation-direction 指定動畫播放的方向。默認是 normal。
animation-fill-mode 指定動畫填充模式。默認是 none。
animation-play-state 指定動畫播放狀態,正在運行或暫停。默認是 running。
animation-name 指定 @keyframes 動畫的名稱。

下面我們一個個仔細說明,各個動畫屬性都是用來做什么的,以及需要注意的地方。

CSS 動畫,也稱關鍵幀動畫。通過

@keyframes 來定義關鍵幀。

幀的概念,想必大家很清楚,比如電影就是一幀幀圖片在播放,利用圖像在人腦中短時間停留來形成動態效果。

CSS 動畫也是利用這個原理。不過開發者不需要給出每一幀的定義。只需要定義一些關鍵的幀即可。因為其余的幀,瀏覽器會根據計時函數插值計算出來。

比如我們一個

div 旋轉一圈,只需要定義開始和結束兩幀即可:

@keyframes?rotate{
??from{
????transform:?rotate(0deg);
??}
??to{
????transform:?rotate(360deg);
??}
}

其中,

rotate 是我給這個動畫起的名字,

from 表示最開始的那一幀,

to 表示結束時的那一幀。

準確地說,

CSS 動畫用百分比來刻畫一個動畫周期,

from 其實是

0% 的別稱,

to 是

100% 的別稱。因此關鍵幀

rotate 等價于:

@keyframes?rotate{
??0%{
????transform:?rotate(0deg);
??}
??100%{
????transform:?rotate(360deg);
??}
}

定義好了關鍵幀后,下來就可以直接用它了:

animation:?rotate?2s;

或者:

animation-name:?rotate;
animation-duration:?2s;

通過

animation-name 來指定動畫使用的關鍵幀,這個是必須的。用

JS 來理解的話,相當于:只有變量聲明是不行的,還需要使用。

另外上述代碼還指定了動畫運行的時間

animation-duration 為

2s。最后運行效果如下:

動圖的效果不是太明顯,方塊在旋轉時,不是勻速的。因為此時刻畫動畫速度的屬性

animation-timing-function 默認值是

ease,即先快后慢。

下面動圖演示了計時函數屬性一些值的情形:

animation-timing-function 常見值有:

linear、

ease、

ease-in、

ease-out、

ease-in-out。這些值其實都是

cubic-bezier(n,n,n,n) 的特例。它們被稱為貝塞爾曲線。除了開發者工具外,《CSS揭秘》作者也寫了的一個在線調試貝塞爾曲線的網站:cubic-bezier.com。貝塞爾曲線這個知識點很有用,

canvas 里也有相應的

API。可以展開的點其實比較多,這里只是初步介紹。

需要提一下,計時函數屬性另外的一個好玩的值是

steps 函數,可以用來實現逐幀動畫:

計時函數屬性介紹到此,后面一律使用值

linear,即表示勻速動畫。

回到關鍵幀,我們除了指定開頭和結束位置的關鍵幀(如果不指定

0% 和

100%,瀏覽器會自動推斷),當然也可以指定任意百分比的幀是什么情況,比如開篇例子的另一種實現:

div{
??width:?40px;
??height:?40px;
??border-radius:?50%;
??background:?#0ff;
??animation:?move?6s?linear?both;
}
@keyframes?move{
??0%{
????transform:?translate(0,0);
??}
??33%{
????transform:?translate(200px,0);
??}
??66%{
????transform:?translate(0,0);
??}
??100%{
????transform:?translate(200px,0);
??}
}

關鍵幀代碼有冗余,可以進一步簡寫:

@keyframes?move{
??0%,?66%{
????transform:?translate(0,0);
??}
??33%,100%{
????transform:?translate(200px,0);
??}
}

此時,動畫時長改成了

6s,動畫進行到三分之一處時,讓

div 位于

200px,三分之二回到開始位置,結束時移動到

200px 處。

這種是比較直觀的實現方式,有很多面試者一般都會想到這種。

注意

animation: move 6s linear both; 聲明中的

both。它是屬性

animation-fill-mode 的一個值。這個屬性容易被忽略,然而卻是

CSS 動畫比較重要的一個屬性。直譯為動畫填充模式,具體說的是什么事情呢?

@keyframes 只是定義了動畫過程中每一幀的值,然而在動畫開始前和動畫結束后,元素改處于什么狀態呢?

animation-fill-mode 說的就是這個事情。除了默認值

none 外,還有另外 3 個值:

  • forwards,表示,動畫完成后,元素狀態保持為最后一幀的狀態。

  • backwards,表示,有動畫延遲時,動畫開始前,元素狀態保持為第一幀的狀態。

  • both,表示上述二者效果都有。

    舉個例子,

    div 從

    100px 處移動到

    200px 處的關鍵幀定義為:

    @keyframes?move{
    ??0%{
    ????transform:?translate(100px,0);
    ??}
    ??100%{
    ????transform:?translate(200px,0);
    ??}
    }

    設置填充模式為

    forwards 時,動畫最后停留在

    200px 處:

    設置動畫延遲

    1s 后執行,且填充模式為

    backwards 時,可以看到動畫在開始前是處于

    100px 處,動畫結束后回到

    0px 處:

    最后設置填充模式為

    both 的情形:

    動畫結束后,保持動畫最后一幀的狀態,這個太有用了,比如我們可以實現一個進度條:

    div{
    ??height:?10px;
    ??border:?1px?solid;
    ??background:?linear-gradient(#0ff,#0ff);
    ??background-repeat:?no-repeat;
    ??background-size:?0;
    ??animation:?move?2s?linear?forwards;
    }
    @keyframes?move{
    ??100%{
    ????background-size:?100%;
    ??}
    }

    效果如下:

    上面提到了可以使用

    animation-delay 設置延遲時間。不為大家注意的是,延遲可以為負數。負延遲表示動畫仿佛開始前就已經運行過了那么長時間。

    拿上述進度條為例子,原動畫用了

    2s 是從

    0% 加載到

    100% 的。如果設置延遲為

    -1s。這動畫會從

    50% 加載到

    100%。仿佛已經運行了

    1s 一樣:

    CSS 動畫是可以暫停的。屬性

    animation-play-state 表示動畫播放狀態,默認值

    running 表示播放,

    paused 表示暫停:

    animation-play-state 這個屬性非常好用,它可以與負延遲一起實現特殊的效果,比如進度條插件:

    目前為止還有兩個屬性沒有介紹,一個是

    animation-iteration-count 表示動畫播放次數。它很好懂,只有一點要注意,無限播放時使用

    infinite。另一個是播放方向

    animation-direction,它的意思說指定動畫按照指定順序來播放

    @keyframes 定義的關鍵幀。其值有:

    • normal 默認值。

    • reverse 表示動畫反向播放。

    • alternate 表示正向和反向交叉進行。

    • alternate-reverse 表示反向和正向交叉進行。

      示意如下:

      animation 屬性以及 8 個子屬性介紹完了,另外需要說明的是它們與

      background 及其各子屬性一樣,是支持多個值的,即在同一個元素上應用多個動畫,送給大家一個如意金箍棒: