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

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

今天就來系統複習一下
過渡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中文網其他相關文章！