CSS3動畫animation相關屬性與主要畫面格規則keyframes的詳細介紹

來源:互聯網
上載者:User

我昨天寫三維正方體的時候,就用到了動畫的文法

今天就來系統複習一下
過渡transition有著它的局限性
雖然簡單,但是它只能在兩個狀態之間改變
並且它需要事件的驅動才能夠進行
不能夠自己運動
所以為瞭解決這樣的問題
我們需要animation動畫

動畫

若想實現動畫效果
僅僅有animation屬性是不夠的
我們還需要@keyframes規則
先來看一個例子

p class="demo"></p>
.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 2s linear;}@keyframes change {    0% {        background-color: red;    }    50% {        background-color: purple;    }    100% {        background-color: lime;    }}

當滑鼠懸浮時,元素先變紅然後過渡到紫色有過渡到綠色

我們先來看看@keyframes 規則

keyframes

在@keyframes中,我們定義動畫主要畫面格
然後animation會按照keyframes主要畫面格裡我們指定的幀狀態進行過渡執行
0% - 100% 就代表動畫的時間過渡
規則中的0%和100%,
可以替換成from和to關鍵字

@keyframes xxx {    from {        ......    }    to {        ......    }}

如果我們省略了起始幀,瀏覽器會按照它最初的樣式進行過渡

@keyframes change {    100% {        background-color: lime;    }}

除此之外,我們還可以把相同的幀寫在一起像這樣

@keyframes change {    from,to {        background-color: red;    }    50% {        background-color: blue;    }}

animation

animation是一個複合屬性,有以下子屬性

  • animation-name
    指定keyframes動畫的名稱

  • animation-duration
    指定動畫執行時間

  • animation-timing-function
    指定動畫的速度曲線,預設“ease”緩動

  • animation-delay
    指定動畫延遲時間,預設“0”無延遲

  • animation-iteration-count
    指定動畫播放的次數,預設“1”執行1次

  • animation-direction
    規定動畫執行方向,預設“normal”

這個複合屬性比我們的transition要複雜一些
前四個屬性就不多解釋了,類似於我們的transition
忘了的同學,戳這裡->傳送門

animation-iteration-count動畫播放次數我們除了填寫數字之外
還可以使用一個常用的關鍵字infinite無限迴圈

animation-direction除了normal以外還有如下屬性值

  • reverse
    反向播放動畫

  • alternate
    輪流播放動畫

  • alternate-reverse
    反向輪流播放動畫

通過一個例子來解釋

.demo {    width: 100px;    height: 100px;    background-color: gold;}.demo:hover {    animation: change 1s 2 linear;}@keyframes change {    to {        width: 200px;    }}

預設normal

兩次測試動畫:
100px -> 200px
100px -> 200px

.demo:hover {    animation: change 1s 2 linear reverse; /*改*/}

reverse

兩次測試動畫:
200px -> 100px
200px -> 100px

.demo:hover {    animation: change 1s 2 linear alternate; /*改*/}

alternate

兩次測試動畫:
100px -> 200px
200px -> 100px

.demo:hover {    animation: change 1s 2 linear alternate-reverse; /*改*/}

alternate-reverse

兩次測試動畫:
200px -> 100px
100px -> 200px

animation-fill-mode

下面我要講的兩個屬性都不是animation的子屬性
所以不能寫在animation中

animation-fill-mode規定對象動畫時間之外的狀態,預設“none”
除了none以外還有如下屬性值

  • forwards
    動畫完成後,保持最後一個屬性(定義在最後一幀)

  • backwards
    在animation-delay指定時間內、動畫顯示之前,應用起始屬性(定義在第一幀)

  • both
    應用forwards和backwards兩種模式

forwards
這個屬性還是蠻有用的
還是我們上面的例子

.demo:hover {    animation: change 1s linear; /*改*/    animation-fill-mode: forwards; /*改*/}


我們發現1s之後,元素並沒有回到最初的100px,而是保持了我們最後一幀的200px狀態

backwards
理解這個屬性,我們需要先加一個延時

.demo:hover {    animation: change 1s linear 1s; /*改*/    /*animation-fill-mode: backwards;*/ /*待增*/}@keyframes change {    from {  /*增*/        width: 150px;    }    to {        width: 200px;    }}

我就不配圖了
我們發現滑鼠懸浮後,1s後瞬間變為150px,然後再過渡到200px
hover-0s -> 1s -> 2s
100px ->瞬變150px –> 過渡到200px

現在增加backwards

.demo:hover {    animation: change 1s linear 1s; /*改*/    animation-fill-mode: backwards; /*增*/}

這回我們發現滑鼠懸浮的一瞬間就變為15px,然後1s後過渡到200px
hover-0s -> 1s -> 2s
瞬變150px ->150px –> 過渡到200px
這就是backwards的作用,延遲前就應用第一幀動畫的樣式,然後準備過渡

animation-play-state

animation-play-state 指定動畫的運行或暫停。預設 “running”
除了running還有paused
利用這個屬性再配合js我們可以控制動畫的暫停和運行

demo.style.animationPlayState = "paused";

今天的動畫就先寫這麼多,感覺寫了很長時間
日後再總結動畫相關的效能問題

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.