CSS 3 Keyframes

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

入门

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

[css] view plain copy

print?

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

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

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

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

[css] view plain copy

print?

1. @-webkit-keyframes fadeIn{  
2.     from {opacity:0;}  
3.     to {opacity:1;}  
4. }  

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

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

[css] view plain copy

print?

1. -webkit-animation-name: fadeIn;  

-webkit-animation-name: fadeIn;

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

[css] view plain copy

print?

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

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

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

[css] view plain copy

print?

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

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

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

[javascript] view plain copy

print?

1. el.style.webkitAnimationPlayState = "running";  

el.style.webkitAnimationPlayState = "running";

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

定义关键帧

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

[css] view plain copy

print?

1. @-webkit-keyframes fadeInRight {   
2.   0% { opacity: 0; -webkit-transform: translateX(0%); }  
3.   100% { opacity: 1; -webkit-transform: translateX(-108%); }  
4. }  
5. @-moz-keyframes fadeInRight {   
6.   0% { opacity: 0; -moz-transform: translateX(20px); }  
7.   100% { opacity: 1; -moz-transform: translateX(0px); }  
8. }  
9. @-o-keyframes fadeInRight {   
10.   0% { opacity: 0; -o-transform: translateX(20px); }  
11.   100% { opacity: 1; -o-transform: translateX(0px); }  
12. }  
13. @keyframes fadeInRight {   
14.   0% { opacity: 0; transform: translateX(20px); }  
15.   100% { opacity: 1; transform: translateX(0px); }  
16. }  
17.   
18. .fadeInRight{  
19.     -webkit-animation-name:fadeInRight;  
20.     -moz-animation-name:fadeInRight;  
21.     -o-animation-name:fadeInRight;  
22.     animation-name:fadeInRight;  
23. }  

@-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 有关动画的参数（如本文介绍）。

[css] view plain copy

print?

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

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