點點筆記

使用@keyframes建立動畫內容

@keyframes 動畫名稱 {
    關鍵影格選擇器1 { 眾多css樣式; }
    關鍵影格選擇器2 { 眾多css樣式; }
  ...
}

概念類似Flash當中的關鍵影格，在動畫內建立各個位置的時候，其css樣式為何，到最後就交由瀏覽器去做補間效果。

關鍵影格選擇器的部分可使用：
1. 0-100% ： 在時間的幾%時為何種css樣式。
2. from、to ： 其實意思與0%和100%一樣。
上列兩種選擇器範例如下：

@keyframes myFirstAnimation
{
 0%{ margin-top:0px; background-color: yellow;}
 50%{ margin-top:50px; background-color: red;}
 80%{ margin-top:80px; background-color: blue;}
}

@keyframes mySecondAnima
{
 from{ margin-top: 20px; color: yellow;}
 to{margin-top: 40px; color: blue;}
}

建立好@keyframes動畫內容後，接著就要在欲放置該動畫的CSS樣式表內加入animation屬性。

Animation屬性

Animation屬性的Syntax於下：

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

animation-name: 動畫名稱;
animation-duration: 動畫作用時間; animation-duration: time ;
animation-timing-function: 動畫補間時運用的計算公式; cubic-bezier(n,n,n,n)
animation-delay: 動畫需間隔多久後才開始;
animation-iteration-count: 動畫作用次數; animation-iteration-count: n |infinite;
animation-direction: 動畫作用的方向; animation-direction: normal|reverse|alternate|alternate-reverse|initial|inherit;

引用：

https://goo.gl/wiawC2

https://goo.gl/MUvgUi