動畫(CSS3) animation

動畫是CSS3中具備顛覆性的特徵之一，可經過設置多個節點來精確控制一個或一組動畫，經常使用來實現複雜的動畫效果。

動畫序列

• 0%是動畫的開始，100%是動畫的完成。這樣的規則就是動畫序列。

• 在@keyframes中規定某項css樣式，就能建立由當前樣式逐漸改變爲新樣式的動畫效果

• 動畫是使元素從一種樣式逐漸變化爲另外一種樣式的效果，能夠改變任意多的樣式任意多的次數。

• 用百分比來規定變化發生的時間，或用關鍵詞"form"和"to"，等同於0%和100%。

動畫基本使用

1. 先定義動畫

2. 再調用動畫

動畫簡寫格式：

animation:動畫名稱 動畫時間 運動曲線 什麼時候開始 播放次數 是否反方向 動畫起始或結束方向;

 

屬性	描述
@keyframes	規定動畫。
animation	全部動畫屬性的簡寫屬性，除了animation-play-state屬性。
animation-name	規定@keyframes動畫的名稱。（必須的）
animation-duration	規定動畫完成一個週期所花費的秒或毫秒，默認是0。（必須的）
animation-timing-function	規定動畫的速度曲線，默認是「ease」。
animation-delay	規定動畫什麼時候開始，默認是0。
animation-iteration-count	規定動畫被播放的次數，默認是1，還有infinite
animation-direction	規定動畫是否在下一週期逆向播放，默認是「normal「,alternate逆播放
animation-play-state	規定動畫是否正在運行或暫停。默認是"running",還有"paused"。
animation-fill-mode	規定動畫結束後狀態，保持forwards回到起始backwards

 

• 簡寫屬性裏面不包含 animation-play-state

• 暫停動畫：animation-play-state: puased; 常常和鼠標通過等其餘配合使用

• 想要動畫走回來 ，而不是直接跳回來：animation-direction ： alternate

• 盒子動畫結束後，停在結束位置： animation-fill-mode ： forwards

 

速度曲線細節

 animation-timing-function：規定動畫的速度曲線，默認是「ease」

值	描述
linear	動畫從頭至尾的速度是相同的。勻速
ease	默認。動畫以低速開始，而後加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
steps()	指定了時間函數中的間隔數量（步長）

 

 

 關於幾個值，除了名字，動畫時間，延時有嚴格順序要求，其它隨意

@keyframes 動畫名稱 {
from{ 開始位置 } 0%
to{ 結束 } 100%
}

animation-iteration-count:infinite; 無限循環播放
animation-play-state:paused; 暫停動畫

 小熊案例：

 

 

 

 div {

            position: absolute;

            width: 200px;

            height: 100px;

            background: url(images/bear.png) no-repeat;

            /* animation:動畫名稱 動畫時間 運動曲線  什麼時候開始  播放次數  是否反方向; */

            /* 元素可添加多個動畫，用逗號分隔 */

            /* steps(步數)，動畫分幾步完成 */

            animation: run 0.5s steps(8) infinite, move 3s linear forwards;

        }

        @keyframes run {

            0% {

                background-position: 0 0;

            }

            100% {

                background-position: -1600px 0;

            }

        }

        @keyframes move {

            0% {

                left: 0;

            }

            100% {

                left: 50%;

                transform: translateX(-50%);

            }

        }