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