CSS 3 Keyframes

╰+攻爆jí腚メ 2022-06-07 02:15 182阅读 0赞

上周学习了利用 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 页面如[这个][Link 1]，都是用 CSS 库快速开发的，自己在 Firebug 复制一个个样式岂不是会累si？[Animate.css][] 是一个流行的库，但直接引用会有冗余的 CSS，于是我想到了 LESS.js。果然是有人整合 Animate.css 到 LESS 了，这下就方便多了。而且还是国人作品，[详见这里][Link 2]。（这里有一个更直观的例子，[请点击][Link 3]）

使用方法，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);
    }

[Link 1]: http://apps.hylinkgz.cn/trial/hylinkad-recruit/?from=timeline&isappinstalled=0
[Animate.css]: https://github.com/daneden/animate.css
[Link 2]: http://www.w3cmark.com/animation/
[Link 3]: https://svn.riouxsvn.com/static_page/bigfoot/js/incubate/html/%E5%B8%B8%E7%94%A8css3%E5%8A%A8%E7%94%BB-%E9%BA%A6%E6%97%B6.htm