CSS3和js-Animate實現動畫效果

使用CSS3的"@keyframes"規則，通過改變元素的位置和大小來實現簡單的動畫效果，這種實現方式在於定義好動畫的keyframes屬性和執行的軌跡函數。因此，不需要javascript插件也可以實現一些復雜的動畫效果，然而，它只能實現在一些比較現代的瀏覽器中。通常我們需要和js混合使用實現一些動畫效果。

javascript animate方法可以監控CSS3動畫的實現軌跡。

例子：

1 用 animate方法 組合CSS和javascript。

操作元素的高度來實現動畫，animate接收兩個參數:[]和{},定義一些屬性對象添加到數組中，定義操作系數添加到對象中。

document.getElementById("element").animate([
  {height: "0"},
  {height: "100%"}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});

2 控制關鍵幀的設置和關鍵幀的時長

document.getElementById("element").animate([
  {width: "0", offset: 0},
  {width: "10%", offset, 1/3},
  {width: "100%", offset: 1}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});

3 操作參數 ：duration 時長 iteration 循環次數  delay 延遲時間 direction 方向  easing 曲線效果 fill 填充

{
  duration: 3000,
  iteration: 2,
  delay: 1000,
  direction: "reverse",
  easing: "ease-in",
  fill: "forwards"
}

4 監聽animation_start和animation_pause事件

var animation = document.getElementById("element").animate([
  {height: "0"},
  {height: "100%"}
], {
  duration: 3000,
  iteration: 2,
  delay: 1000
});
 
document.getElementById("animation_start").addEventListener("click", function() {
  animation.play();
}, false);
 
document.getElementById("animation_pause").addEventListener("click", function() {
  animation.pause();
}, false);

5 監聽finish事件

animation.addEventListener("finish", function() {
  alert("The animation has ended.");
}, false);

6 瀏覽器支持 chrome version 36+ 的瀏覽器

出處 http://www.noupe.com/development/coming-to-a-screen-near-you-css3-animations-and-the-new-javascript-method-animate-82409.html