css3動畫筆記

------------------------------------------------------------------------------------
@keyframes
animation                    全部動畫屬性的簡寫屬性，除了 animation-play-state 屬性。
animation-name              規定 @keyframes 動畫的名稱。   
animation-duration            規定動畫完成一個週期所花費的秒或毫秒。默認是 0。   
animation-timing-function    規定動畫的速度曲線。默認是 "ease"。   
animation-delay                規定動畫什麼時候開始。默認是 0。   
animation-iteration-count    規定動畫被播放的次數。默認是 1。   
animation-direction         規定動畫是否在下一週期逆向地播放。默認是 "normal"。   
animation-play-state        規定動畫是否正在運行或暫停。默認是 "running"。   
animation-fill-mode         規定對象動畫時間以外的狀態。*/

關鍵字:
Keyframes: 關鍵幀
animation：動畫
duration: 持續時間
timing-function：定時活動/速度曲線
iteration-count 重複計數/重複播放
direction  反向播放
play-state 播放狀態
fill-mode  填充模式/結束後動畫是否可見
------------------------------------------------------------------------------------
@keyframes//
語法：@keyframes animationname {keyframes-selector {css-styles;}}
animationname    必需。定義動畫的名稱。
keyframes-selector    必需。動畫時長的百分比。
合法的值：
0-100%
from（與 0% 相同）
to（與 100% 相同）
css-styles    必需。一個或多個合法的 CSS 樣式屬性。

exp1:
在一個動畫中添加多個 keyframe 選擇器：
@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

exp2:
在一個動畫中改變多個 CSS 樣式：
@keyframes mymove
{
0%   {top:0px; background:red; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

exp3:

帶有多個 CSS 樣式的多個 keyframe 選擇器：
@keyframes mymove
{
0%   {top:0px; left:0px; background:red;}
25%  {top:0px; left:100px; background:blue;}
50%  {top:100px; left:100px; background:yellow;}
75%  {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}

}

------------------------------------------------------------------------------------
語法：animation: name duration timing-function delay iteration-count direction;

語法：動畫:   動畫名字  完成時間 何時快何時慢 動畫延遲  播放次數 是否反向播放

animation 屬性是一個簡寫屬性，用於設置六個動畫屬性：
animation-name                   規定須要綁定到選擇器的 keyframe 名稱。。
animation-duration                  規定完成動畫所花費的時間，以秒或毫秒計。
animation-timing-function           規定動畫的速度曲線。
animation-delay                     規定在動畫開始以前的延遲。
animation-iteration-count           規定動畫應該播放的次數。
animation-direction                 規定是否應該輪流反向播放動畫。
註釋：請始終規定 animation-duration 屬性，不然時長爲 0，就不會播放動畫了。
object.style.animation="mymove 5s infinite"

------------------------------------------------------------------------------------
語法：animation-name: keyframename|none;
keyframename    規定須要綁定到選擇器的 keyframe 的名稱。
none            規定無動畫效果（可用於覆蓋來自級聯的動畫）。
JavaScript 語法：    object.style.animationName="mymove"

------------------------------------------------------------------------------------

語法:animation-duration: time;

animation-duration 屬性定義動畫完成一個週期所須要的時間，以秒或毫秒計。
object.style.animationDuration="3s"

規定完成動畫所花費的時間。默認值是 0，意味着沒有動畫效果。
請始終規定 animation-duration 屬性，不然時長爲 0，就不會播放動畫了。
JavaScript 語法：    object.style.animationDuration="3s"
------------------------------------------------------------------------------------
語法：animation-timing-function: value
animation-timing-function 規定動畫的速度曲線。
速度曲線定義動畫從一套 CSS 樣式變爲另外一套所用的時間。
速度曲線用於使變化更爲平滑。

默認值：    ease
JavaScript 語法：    object.style.animationTimingFunction="linear"

animation-timing-function 使用名爲三次貝塞爾（Cubic Bezier）函數的數學函數，來生成速度曲線。您可以在該函數中使用本身的值，也能夠預約義的值：
linear    動畫從頭至尾的速度是相同的。    測試
ease    默認。動畫以低速開始，而後加快，在結束前變慢。    測試
ease-in    動畫以低速開始。    測試
ease-out    動畫以低速結束。    測試
ease-in-out    動畫以低速開始和結束。    測試
cubic-bezier(n,n,n,n)    在 cubic-bezier 函數中本身的值。可能的值是從 0 到 1 的數值。

cubic-bezier(n,n,n,n)

  exp：(0,1,0,1)=（動畫過渡用時0秒 1 0 1） 衝 慢 衝 慢
實例 1
爲了更好地理解不一樣的定時函數值，這裏提供了設置五個不一樣值的五個不一樣的 div 元素：
/* W3C 和 Opera: */
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
/* Firefox: */
#div1 {-moz-animation-timing-function: linear;}
#div2 {-moz-animation-timing-function: ease;}
#div3 {-moz-animation-timing-function: ease-in;}
#div4 {-moz-animation-timing-function: ease-out;}
#div5 {-moz-animation-timing-function: ease-in-out;}
/* Safari 和 Chrome: */
#div1 {-webkit-animation-timing-function: linear;}
#div2 {-webkit-animation-timing-function: ease;}
#div3 {-webkit-animation-timing-function: ease-in;}
#div4 {-webkit-animation-timing-function: ease-out;}
#div5 {-webkit-animation-timing-function: ease-in-out;}
------------------------------------------------------------------------------------

語法:animation-delay: time;

定義和用法
animation-delay 屬性定義動畫什麼時候開始。
animation-delay 值以秒或毫秒計。
提示：容許負值，-2s 使動畫立刻開始，但跳過 2 秒進入動畫。

JavaScript 語法：    object.style.animationDelay="2s"
time    可選。定義動畫開始前等待的時間，以秒或毫秒計。默認值是 0。

親自試一試 - 實例
負值，請注意動畫跳過 2 秒進入動畫週期：
animation-delay: -2s /* W3C 和 Opera */
-moz-animation-delay: -2s /* Firefox */
-webkit-animation-delay: -2s /* Safari 和 Chrome */
------------------------------------------------------------------------------------

語法：animation-iteration-count: n|infinite;

定義和用法
animation-iteration-count 屬性定義動畫的播放次數。
JavaScript 語法：    object.style.animationIterationCount=3

n    定義動畫播放次數的數值。    、
infinite    規定動畫應該無限次播放。
------------------------------------------------------------------------------------

語法:animation-direction: normal|alternate;
定義和用法
animation-direction 屬性定義是否應該輪流反向播放動畫。
若是 animation-direction 值是 "alternate"，則動畫會在奇數次數（一、三、5 等等）正常播放，而在偶數次數（二、四、6 等等）向後播放。
註釋：若是把動畫設置爲只播放一次，則該屬性沒有效果。

JavaScript 語法：    object.style.animationDirection="alternate"

normal    默認值。動畫應該正常播放。    測試
alternate    動畫應該輪流反向播放。
------------------------------------------------------------------------------------

語法:animation-play-state: paused|running;

animation-play-state 屬性規定動畫正在運行仍是暫停。
註釋：您能夠在 JavaScript 中使用該屬性，這樣就能在播放過程當中暫停動畫。
JavaScript 語法：    object.style.animationPlayState="paused"
paused    規定動畫已暫停。    測試
running    規定動畫正在播放。
------------------------------------------------------------------------------------

語法：animation-fill-mode : none | forwards | backwards | both;

定義和用法
animation-fill-mode 屬性規定動畫在播放以前或以後，其動畫效果是否可見。
註釋：其屬性值是由逗號分隔的一個或多個填充模式關鍵詞。
默認值：    none
繼承性：    no
版本：    CSS3
JavaScript 語法：    object.style.animationFillMode=none

值    描述
none    不改變默認行爲。
forwards    當動畫完成後，保持最後一個屬性值（在最後一個關鍵幀中定義）。
backwards    在 animation-delay 所指定的一段時間內，在動畫顯示以前，應用開始屬性值（在第一個關鍵幀中定義）。
both    向前和向後填充模式都被應用。

////////////////////////////////////////////////////////////////////////////