yellow range 空隙 定義 tro content bin ora .com

CSS3的animation很容易就能實現各種酷炫的動畫，雖然看到別人的成果圖會覺得很難，但是如果掌握好各種動畫屬性，做好酷炫吊炸天的動畫都不在話下，好，切入正題。
一、動畫屬性：
動畫屬性包括：①animation-name，②animation-duration，③animation-timing-function，
以下是各屬性詳解：
1、animation-name：指定要綁定到選擇器的關鍵幀的名稱。
2、animation-duration：定義動畫完成一個周期需要多少秒或毫秒
3、animation-timing-function：指定動畫將如何完成一個周期。

值	說明
linear	動畫從頭到尾的速度是相同的。
ease	默認。動畫以低速開始，然後加快，在結束前變慢。
ease-in	動畫以低速開始。
ease-out	動畫以低速結束。
ease-in-out	動畫以低速開始和結束。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函數中自己的值。可能的值是從 0 到 1 的數值。
step-start	在變化過程中，都是以下一幀的顯示效果來填充間隔動畫
step-end	在變化過程中，都是以上一幀的顯示效果來填充間隔動畫
steps()	可以傳入兩個參數，第一個是一個大於0的整數，他是將間隔動畫等分成指定數目的小間隔動畫，然後根據第二個參數來決定顯示效果。第二個參數設置後其實和step-start，step-end同義，在分成的小間隔動畫中判斷顯示效果。

3.1 cubic-bezier(n,n,n,n)稱為三次貝塞爾曲線，速度曲線。
3.1.1 cubic-bezier(n,n,n,n)曲線定制網站地址：http://cubic-bezier.com/#.23,.66,.76,.52
3.1.2 小球落地又彈起demo地址：http://codepen.io/aSuncat/pen/gwLBWz
我不知道這個cubic-bezier曲線是怎麽算出來的，難道是要靠自己試出來的嘛，不知道有沒有人知道怎麽算出來的。???
3.2 不同值之間差異demo地址（4個方塊背景顏色變化）：http://codepen.io/aSuncat/pen/JRRzax
demo解析：①step-start：20%(background: green;)到60%(background: blue;)之間，顯示的是60%的效果(background: blue;)
②step-end：與step-start相反，20%(background: green;)到60%(background: blue;)之間，顯示的是20%的效果(background: green;)
③steps(1, start) 等於step-start，steps(1,end)等於step-end
④steps函數的工作機制：

4、animation-delay：屬性定義動畫什麽時候開始。
4.1 單位可以是秒（s）或毫秒（ms）。
4.2 單位可以是負值，-2s表示動畫立馬開始，但跳過 2 秒進入動畫，即前2秒的動畫不執行，直接跳過前2秒進入動畫。
4.2.1 類似音波的加載效果demo地址：http://codepen.io/aSuncat/pen/ALLNpE
demo解析：①設置同樣的動畫，通過animation為負值來實現不同時間段的線條的長度。
②效果示意：
一次動畫1.2s，分解為12個階段，每個階段0.1秒。每個階段的第3秒線拉長。
line1是從0進入動畫。
line2是跳過前11個階段，即直接從11進入動畫。
依次類推…
③寫5個div時，連著寫，然後自己設置margin，一方面避免代碼壓縮後各線條之間沒有空隙，另一方面避免自己不知道5根線的總寬度。
4.2.2 京東全民尋寶demo地址：http://codepen.io/aSuncat/pen/WGoZGm
demo解析：①如果沒有steps(8)，圖片會從第一行字直接跳到最後一行，中間的6行不會出現。
5、animation-iteration-count ：定義動畫應該播放多少次。

值	說明
n	一個數字，定義應該播放多少次動畫
infinite	指定動畫應該播放無限次（永遠）

6、animation-direction：定義是否循環交替反向播放動畫。

值	說明
normal	默認值。動畫按正常播放。
reverse	動畫反向播放。
alternate	動畫在奇數次（1、3、5…）正向播放，在偶數次（2、4、6…）反向播放。
alternate-reverse	動畫在奇數次（1、3、5…）反向播放，在偶數次（2、4、6…）正向播放。
initial	設置該屬性為它的默認值。
inherit	從父元素繼承該屬性。

6.1 如果動畫被設置為只播放一次，該屬性將不起作用。
6.2 動畫循環播放時，每次都是從結束狀態跳回到起始狀態，再開始播放。animation-direction屬性可以重寫該行為。
7、animation-fill-mode：規定當動畫不播放時（當動畫完成時，或當動畫有一個延遲未開始播放時），要應用到元素的樣式。

值	說明
none	默認值。動畫在動畫執行之前和之後不會應用任何樣式到目標元素。
forwards	在動畫結束後（由 animation-iteration-count 決定），動畫將應用該屬性值。
backwards	動畫將應用在 animation-delay 定義期間啟動動畫的第一次叠代的關鍵幀中定義的屬性值。這些都是 from 關鍵幀中的值（當 animation-direction 為 “normal” 或 “alternate” 時）或 to 關鍵幀中的值（當 animation-direction 為 “reverse” 或 “alternate-reverse” 時）。
both	動畫遵循 forwards 和 backwards 的規則。也就是說，動畫會在兩個方向上擴展動畫屬性。
initial	設置該屬性為它的默認值。
inherit	從父元素繼承該屬性。

7.1 默認情況下，CSS 動畫在第一個關鍵幀播放完之前不會影響元素，在最後一個關鍵幀完成後停止影響元素。animation-fill-mode 屬性可重寫該行為。
7.2 forwads表示讓動畫停留在結束狀態，即停留在最後一幀。
7.3 backwords：
7.3.1 當 animation-direction 為 “normal” 或 “alternate” 時，回到第一幀。
7.3.2 當 animation-direction 為 “reverse” 或 “alternate-reverse” 時，停留在最後一幀。
8、animation-play-state：指定動畫是否正在運行或已暫停。

值	說明
paused	指定暫停動畫。
running	指定正在運行的動畫。

8.1 在JavaScript中使用此屬性在一個周期中暫停動畫。
8.2 線條鼠標懸停開始動畫demo地址：http://codepen.io/aSuncat/pen/BLLbko
二、動畫相關
1、animation的簡寫（即上述屬性的介紹順序）

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• 1

• 1

具體化可以記成一下形式：

animation:myAnim 1s linear 1s infinite alternate both running;

• 1

• 1

2、keyframes：定義動畫規則，關鍵幀。

值	說明
animationname	必需的。定義animation的名稱。
keyframes-selector	必需的。動畫持續時間的百分比。
css-styles	必需的。一個或多個合法的CSS樣式屬性

2.1 寫法自由
2.1.1 指定的變化時發生時使用％，或關鍵字”from”和”to”，這是和0％到100％相同。以下兩段代碼效果相同。

@keyframes myAnim{
  from { background: #f00; }
  50% { background: #0f0; }
  to { background: yellowgreen; }
}

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

@keyframes myAnim{
  0% { background: #f00; }
  50% { background: #0f0; }
  100% { background: yellowgreen; }
}

• 1
• 2
• 3
• 4
• 5

• 1
• 2
• 3
• 4
• 5

2.1.2 如果省略某個狀態，瀏覽器會自動推算中間狀態。但是，為了獲得最佳的瀏覽器支持，應該始終定義0％和100％的選擇器。

@keyframes rainbow {
  50% { background: orange }
  to { background: yellowgreen }
}

@keyframes rainbow {
  to { background: yellowgreen }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

2.1.3 可以將多個狀態寫在一行。

@keyframes myAnim{
  0%，100% { background: #f00; }
  50% { background: #0f0; 
}

• 1
• 2
• 3
• 4

• 1
• 2
• 3
• 4

3、瀏覽器前綴
IE 10和Firefox（>= 16）支持沒有前綴的animation，firefox（<16）使用-moz-前綴，因為現在firefox的版本也都不低，所以firefox都直接使用沒有前綴的animation。
而chrome，safari，opera不支持，所以必須使用webkit前綴。
使用示例如下：

div{
    animation:myAnim 1s;
    -webkit-animation:myAnim 1s;
}
@keyframes myAnim{
  0% { background: #f00; }
  50% { background: #0f0; }
  100% { background: yellowgreen; }
}
@-webkit-keyframes myAnim{
  0% { background: #f00; }
  50% { background: #0f0; }
  100% { background: yellowgreen; }
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

4、定義動畫時，必須定義動畫的名稱和動畫的持續時間。如果省略持續時間，動畫將無法運行，因為默認值是0。

//http://blog.csdn.net/aSuncat/article/details/52588078

css動畫-animation各個屬性詳解（轉）