css3 中的關鍵幀 @keyframes

@keyframes 規則通過在動畫序列中定義關鍵幀的樣式來控制 css 動畫序列中的中間步驟

@keyframes identifier {
  from {
    // 等效於 0%
  }
  to {
   // 等效於 100%
  }      
}

例如：

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

@keyframes identifier {
  0% { top
 
: 0; left: 0; }
  30% { top: 50px; }
  68%, 72% { left: 50px; }
  100% { top: 100px; left: 100%; }
}

css animation 屬性是如下屬性的簡寫形式：animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction 和 animation-fill-mode

/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name 
 
*/
  animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
  animation: 3s linear 1s slidein;

/* @keyframes duration | name */
  animation: 3s slidein;

1、animation-name

animation-name: none | IDENT[,none | IDENT]*;

用來定義一個動畫的名稱，主要有兩個值：IDENT 是有 Keyframes 創建的動畫名，或 none （默認值）。多個取值，用逗號隔開

2、animation-duration

animation-duration: <time>[,<time>]*

用來指定元素播放動畫所持續的時間長，取值數值，單位s 或 ms。默認值 0

3、animation-timing-function

animation-timing-function:ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>) [, ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)]* 

同 tansition-timing-function

4、animation-delay

animation-delay: <time>[,<time>]*

同 transition-delay

5、animation-iteration-count

animation-iteration-count:infinite | <number> [, infinite | <number>]* 

用來指定元素播放動畫的循環次數，其中 <number> 取值為數字，默認是 1。infinite 為無限次數循環

6、animation-direction

 animation-direction: normal | alternate [, normal | alternate]* 

用來指定元素動畫播放的方向，默認值是 normal，表示動畫的每次循環都是向前播放；另一個取值是 alternate，表示動畫播放在第偶數次向前播放，奇數次反方向播放

7、animation-play-state

animation-play-state:running | paused [, running | paused]* 

用來控制元素動畫的播放狀態，允許播放和暫停

8、animation-fill-mode

用來指定動畫執行前後如何為目標元素應用樣式

demo：文本滑過瀏覽器窗口

<p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio ex amet deleniti, earum ratione assumenda eius laborum nulla minima, unde ullam natus et nostrum labore optio totam laudantium reprehenderit est.</p>

.text{
  animation-name: slidein;
  animation-duration: 3s;
}
@keyframes slidein {
  from{
    margin-left: 100%;
    width: 300%;
  }
  to{
    margin-left: 0%;
    width: 100%;
  }
}

此時，第一幀時，元素的左邊距為100%（即位於容器的右邊界），寬為300%（即容器寬度的3倍），整個標題位於瀏覽器窗口右邊界之外。第二幀時，元素的左邊距為0，寬度為100%，使得動畫結束時元素和窗口邊界對齊

增加一個幀，讓字體變大然後恢復正

@keyframes slidein {
  from{
    margin-left: 100%;
    width: 300%;
  }
  75%{
    margin-left: 25%;
    width: 150%;
    font-size: 300%;
  }
  to{
    margin-left: 0%;
    width: 100%;
  }
}

重復動畫

animation-iteration-count 用以指定動畫重復的次數，僅僅使用該屬性就能使動畫重復播放。例如：infinite 可以使動畫無限重復

.text{
  animation-name: slidein;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
@keyframes slidein {
  from{
    margin-left: 100%;
    width: 300%;
  }
  // 75%{
  //   margin-left: 25%;
  //   width: 150%;
  //   font-size: 300%;
  // }
  to{
    margin-left: 0%;
    width: 100%;
  }
}

來回運動

animation-direction 屬性為 alternate 時，可以使標題來回滑動，避免每次動畫開始時總是調回開始位置顯得很怪異

.text{
  animation-name: slidein;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes slidein {
  from{
    margin-left: 100%;
    width: 300%;
  }
  // 75%{
  //   margin-left: 25%;
  //   width: 150%;
  //   font-size: 300%;
  // }
  to{
    margin-left: 0%;
    width: 100%;
  }
}

使用動畫事件

利用動畫事件可以更好的控制動畫和信息。這些事件由 AnimationEvent對象表示，可探測動畫何時開始結束和開始新的循環。每個事件包括動畫發生的時間和觸發事件的動畫名稱。

我們將修改滑動文本示例，輸出每個動畫事件出現時的信息。

.slidein {
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -moz-animation-name: slidein;
  -webkit-animation-name: slidein;
  animation-name: slidein;
  -moz-animation-iteration-count: 3;
  -webkit-animation-iteration-count: 3;
  animation-iteration-count: 3;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  animation-direction: alternate;
}
    
@-moz-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
      
  to {
    margin-left:0%;
    width:100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0%;
   width:100%;
 }
}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0%;
   width:100%;
 }
}

（1）、添加動畫事件監聽器

我們使用JavaScript代碼監聽所有三種可能的動畫事件，setup()方法設置事件監聽器，當文檔第一次加載完成時執行該方法

var e = document.getElementById("watchme");
e.addEventListener("animationstart", listener, false);
e.addEventListener("animationend", listener, false);
e.addEventListener("animationiteration", listener, false);

e.className = "slidein";

以上是非常標準的代碼寫法，setup()最後設置動畫元素的class為slidein，啟動動畫。

為什麽這樣做?因為animationstart事件在動畫一開始時就被觸發，在我們的示例中，該事件在我們的代碼執行前就被觸發，所以我們自己通過設置元素的的class來啟動動畫。

（2）、接收事件

事件傳遞給listener()函數，代碼如下所示

function listener(e) {
  var l = document.createElement("li");
  switch(e.type) {
    case "animationstart":
      l.innerHTML = "Started: elapsed time is " + e.elapsedTime;
      break;
    case "animationend":
      l.innerHTML = "Ended: elapsed time is " + e.elapsedTime;
      break;
    case "animationiteration":
      l.innerHTML = "New loop started at time " + e.elapsedTime;
      break;
  }
  document.getElementById("output").appendChild(l);
}

通過event.type來判斷發生的是何種事件，然後添加對應的註解到<ul>中。

HTML代碼：

<div>
    <h1 id="watchme">Watch me move</h1>
    <p class="text">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Distinctio ex amet deleniti, earum ratione assumenda eius laborum nulla minima, unde ullam natus et nostrum labore optio totam laudantium reprehenderit est.</p>
    <ul id="output"></ul>
</div>

註意以上時間非常接近預期時間，但不是完全相等。也要註意在最後一個周期完成後，不會觸發animationiteration事件，而觸發animationend事件。

參考文檔：

https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation

http://www.w3cplus.com/content/css3-animation

CSS3 Animation