CSS3動畫animation相關屬性與關鍵影格規則keyframes的詳細介紹

黄舟

發布： 2017-05-21 16:06:22

原創

3437 人瀏覽過

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

今天就來系統複習一下
過渡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";

登入後複製

今天的动画就先写这么多，感觉写了很长时间
日后再总结动画相关的性能问题

以上是CSS3動畫animation相關屬性與關鍵影格規則keyframes的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！