CSS 3 Keyframes 把玩

上周学习了利用 CSS3 来制作页面动画，完成了下载页面动画的开发。

入门

按照需求要实现“渐显 FadeIn”的效果。最简单的情况下，使用 transition 即可实现效果：

transition: opacity 500ms;
opacity: 0;/* 修改 opacity 透明度为 1 完全显示 */

不过略为麻烦的时候，无论是为元素插入一个 class 新样式还是直接修改元素的 style.opacity = 1;，都必须经过 JavaScript 来控制。实际上 CSS 可独立完成，无须借助 JS。CSS 3 提供了 keyframe 规则控制以”时间轴”为控制手段的动画机制,有点类似以前的 Flash 时间轴和关键帧概念.

如果利用 keyframe 实现渐显，首先先定义  keyframes 的名称和 from 起始状态和结束状态 to，分别设置透明为 0 和 1。

@-webkit-keyframes fadeIn{
    from {opacity:0;}
    to {opacity:1;}
}

然后在具体那个元素身上指定关键帧名称即可套用效果。

-webkit-animation-name: fadeIn;

动画默认自动执行，但可以延时执行，如下设定所示。

-webkit-animation-delay: 3s;
-webkit-animation-duration:.5s; // 動畫作用時間;

通常伴着随更丰富的其它选项：

-webkit-animation-iteration-count: 1; // 播放次数，默认 1，设置 infinite 则无限播放
-webkit-animation-direction: alternate; // 播放方向
-webkit-animation-fill-mode: forwards; // 完成一次动画后是否再重复，这里 forwards 表示不重复

前面说到动画自动执行，如果不希望自动执行，可设置 -webkit-animation-play-state: paused 暂停，然后修改其为 running 便开始运行动画（通常这步由 JS 触发）。

el.style.webkitAnimationPlayState = "running";

值得一提的是，keyframes 对于 display:none/block 的元素自动实施效果，这样场景切换的时候十分方面，无须开发者额外为这一层逻辑进行编码！

定义关键帧

类似 Flash，CSS3 也有关键帧的概念。例子如下：

@-webkit-keyframes fadeInRight { 
  0% { opacity: 0; -webkit-transform: translateX(0%); }
  100% { opacity: 1; -webkit-transform: translateX(-108%); }
}
@-moz-keyframes fadeInRight { 
  0% { opacity: 0; -moz-transform: translateX(20px); }
  100% { opacity: 1; -moz-transform: translateX(0px); }
}
@-o-keyframes fadeInRight { 
  0% { opacity: 0; -o-transform: translateX(20px); }
  100% { opacity: 1; -o-transform: translateX(0px); }
}
@keyframes fadeInRight { 
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0px); }
}

.fadeInRight{
	-webkit-animation-name:fadeInRight;
	-moz-animation-name:fadeInRight;
	-o-animation-name:fadeInRight;
	animation-name:fadeInRight;
}

利用 CSS 库

实际上现在看到不少的炫目 H5 页面如这个，都是用 CSS 库快速开发的，自己在 Firebug 复制一个个样式岂不是会累si？Animate.css 是一个流行的库，但直接引用会有冗余的 CSS，于是我想到了 LESS.js。果然是有人整合 Animate.css 到 LESS 了，这下就方便多了。而且还是国人作品，详见这里。（这里有一个更直观的例子，请点击）

使用方法，mixin 样式，然后定义 .animation 有关动画的参数（如本文介绍）。

.box{
  .bounceIn(); // 其中动画名还可以设置具体的参数
  .animation(bounceIn 1s linear infinite);
}