开源 Web 技术之 CSS3 Animations 网页动画入门教程

发布于 2019-10-20 17:40:53 字数 8044 浏览 1712 评论 0

CSS3 已经成为当今 Open Web 技术环境下的开发者必然选择的一门技术，这些年从 CSS2.1 一路走来升级到全新版本的 CSS3 在各个技术公司和社区的合作下，也有了很多创新。

Web 前端交互开发者原本可以通过CSS Transitions 对 CSS 属性值的插入完成当他们需要修改属性结果时所实现的简单动画需求，但是这种简单的动画只在开始和结束状态上才可以通过已经定义好的 CSS 属性值来控制，而动画变化的整个过程中，创作者基本不可能实现控制。

因此 CSS3 Animations Module 被作为一种关键帧动画控制的功能手段被引入CSS3 的规范草案中。

在开始讲解 CSS3 Animation 的正式分析之前，我认为我们有必要先看一组数据统计，它来自 Caniuse.com 上对于浏览器器支持 CSS3 Animation 的百分比，如图1所示。

图1.目前各大主流浏览器不同版本对于CSS3 Animation的支持率

从图1中我们可以得到这样的信息：

IE浏览器的7,8,9版本均无法支持CSS3 Animation，IE10可以支持；
Firefox从16.0以后的版本可以支持；
Chrome浏览器从23.0以后可以支持；
Safari浏览器则是5.1+的版本可以支持；
Opera是12.1+的版本支持；
iOS Safari从3.2到6.0的各个Build都能支持CSS3 Animation；
Opera Mini不支持；
Android浏览器从2.1到3.0是部分支持CSS3 Animation，4.0+的版本均支持；
BB Browser是7.0开始支持CSS3 Animation。

全球主流浏览器各个版本支持CSS3 Animation的比率已经从2012年初的53.91%提升到66.56%，经过2012年一年的努力，CSS3 Animation的支持百分比率上升了近13个百分点。

这一系列的数据可以给前端在是否使用CSS3 Animation于生产项目时非常关键的数据决策支持。另一方面来看，从CSS3 Animation的进步幅度而言，它是现今前端交互设计师值得投入学习的一项技术。

前端交互设计师和开发者对于CSS3 Animation的使用，将可以在跨设备的浏览器上实现平滑的，基于关键帧的可编程维护的CSS动画，这个实现并不需要浏览器额外提供第三方控件支持，这一点非常重要。例如可以使用CSS3 Animation在iOS设备(iPhone,iPad等）的safari浏览器上实现CSS动画功能。

学习CSS3 Animation需要注意以下几个规则。

第一，CSS Animation会对属性值产生影响，当动画在执行过程中，被计算出的CSS属性值会被动画来控制，它会覆盖原来页面中已经指定的样式属性值，比如物件的位置坐标，色彩等，会随着动画，值不断变动覆盖这些对象的最初属性值。CSS3 Animation会覆盖所有标准Style规则，但是会被标记为!important的规则覆盖。

第二，如果在某个时间某个点上有多个动画作用于一个属性至上，那么该点上最后一个触发“animation-name”的值会覆盖其他的值。

第三，动画不会影响进入动画前的计算出的属性值，不会影响动画delay期前的属性值，不会影响动画结束后的属性值。我们引用W3C上的标准图示来解释上面的话，如图2所示。

fig02

图2. CSS3 Animation对于计算CSS属性值在动画不同阶段的影响

接下来我们可以通过示例来明确对CSS3 Animation的操作方法。第一个示例一定是一个简单的示例，比如，我们想让一个色块以关键帧的方式左右运动。要完成这个动画，从CSS3的设计角度出发，我们要有以下几步的处理方法：

定义一个HTML页面，里面有个区域用于放置一个色块。
通过CSS3定义这个色块的基础属性。
用CSS3来适当修饰这个色块。
用CSS3 Animation的语法来定义这个色块的关键帧动画。

通过以上4步思路，我们认定可以完成这个CSS3 Animation中堪称最简单的动画。接着就是落实在实现每一步上。首先，我们需要一个空白的HTML5页面，这一步太简单了，我直接贴代码好了，没什么可解释的。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">  
  <title>CSS3 Animation Demo1</title>
</head>
<body>
  <div class="box"></div>
</body>
</html>

其次，是对名称为box的div属性定义其代表的色彩区域，这里就要用到CSS3的代码，这段代码放在<style>标签对内。

<style>
.box{
  width:200px;
  height:200px;
  background:rgba(255,0,0,0.5);
  border-radius:10px;
  position:absolute;
  top:100px;
  left:50%;
  margin-left:-100px;
}
</style>

如果此时打开浏览器，会看到浏览器页面中央偏上部分有一个红色色块，如图3所示。

fig03

图3. 用CSS3定义出来的一个红色色块

你完全可以把上面的色块更深度的定制，比如把border-radius的值设定为100，你可以试试看色块变成了什么形状。本文就不在CSS3的其他属性设定上花费太多的时间，想深入学习CSS3整个体系的，现在的网络资源和书籍简直多如牛毛。对于最后一步，用CSS3 Animation来定义色块的关键帧动画，我们来看下面这段代码：

@-webkit-keyframes movebox{
  0% {left:10%;}
  50% {left:90%;border-radius:100px;}
  100% {left:10%;}
}

上述代码定义了一个CSS关键帧动画，-webkit-keyframes是指该CSS3动画定义是针对以webkit为核心的浏览器，比如Google Chrome，如果以-moz-keyframes出现，则定义是针对Mozilla Firefox的，这种CSS3加不同前缀适应不同浏览器兼容性的方式，已经非常常见，本文将不再赘述，后面的例子都以-webkit-为主。movebox是这个示例动画的名称定义，调用该动画时会使用该名称。0%，50%，100%是该动画的3个关键帧，分别表示动画开始，中间，结束，当然，我们还可以在0%-100%之间加入更多若干的关键帧。50%{left:90%;border-radius:100px;}是表示动画中间关键帧，调用该动画的CSS3对象的位置将会移动到距离浏览器viewport左边相对90%的位置，边缘圆角半径变为100px，由于定义色块的宽度是200px，那么你将在50%位置的动画关键帧处看到有趣的变化。

那么上述animation1.html的整体代码是如下的部分：

<style>
  .box{
    width:200px;
    height:200px;
    background:rgba(255,0,0,0.5);
    border-radius:10px;
    position:absolute;
    top:100px;
    left:50%;
    margin-left:-100px;
    -webkit-animation:movebox 0s 5s infinite;
  }
    @-webkit-keyframes movebox{
      0% {left:10%;}
      50% {left:90%;border-radius:100px;}
      100% {left:10%;}
    }
  
</style>
<div class="box"></div>

借着上面的这第一个Demo，我们可以了解了CSS3 Animation 的基本处理原理。CSS3定义的关键帧动画和Flash的关键帧动画处理机制几乎一样，只需要开发者定义关键帧即可，而关键帧之间的变化，则完全依靠浏览器的补间计算能力来完成。CSS3 Animation在-webkit-animation属性值的定义上也有其他一些设定你可以尝试，-webkit-animation的属性值有如下主要参数：

-webkit-animation-name: 动画名称
-webkit-animation-iteration-count:循环次数，infinite表示无限
-webkit-animation-timing-function:linear,ease(默认）,ease-in,ease-out等
-webkit-animation-duration:动画时长(单位:s)
-webkit-animation-delay:动画延时(单位:s)
更多参数定义，参考http://www.w3.org/TR/css3-animations/

那么我们将第一个CSS3的Demo的语法改动的更加规范一些，就变成下面的代码：

<style>
  #box{
    width:200px;
    height:200px;
    background:rgba(255,0,0,0.5);
        border-radius:10px;
    position:absolute;
    top:100px;
    left:50%;
    margin-left:-100px;
  }
    #box.animate{
      -webkit-animation-name:movebox;
      -webkit-animation-duration:5s;
      -webkit-animation-timing-function:ease;
      -webkit-animation-iteration-count:infinite;
    }
    @-webkit-keyframes movebox{
      0% {left:10%;}
      50% {left:90%;border-radius:100px;}
      100% {left:10%;}
    }
  
</style>
<div id="box" class="target animate"></div>

接下来我们通过第二个Demo来巩固一下CSS3 Animation的理解，下面是第二个Demo - 旋转的手指。代码如下：

<style>
  .finger {
    opacity: 0.5;
    -webkit-animation: ring;
    -webkit-animation-duration: 4s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-transform-origin: 50% 50%;
  }

  @-webkit-keyframes ring {
    from { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg); }
 }

</style>
<img class="finger" src="finger.png">

这个Demo主要是通过CSS3 Animation来操作一个png图片，通过定义from开始和to结束的两个关键帧状态的属性值，浏览器完成动画的渲染播放。

下面本人就CSS3 Animation可能被使用的用例场景做一个描述，CSS3 Animation可以通过浏览器执行CSS3代码来渲染关键帧动画，但是它也有一定的限制：

CSS3 Animation处理动画仍然是浏览器调用CPU处理，复杂的动画不适用于现在的CSS3 Animation。
CSS3 Animation动画如果由多个并行的动画组成，那么他们之间存在层次覆盖关系，如果用opacity来解决层次透明的话，动画用在移动设备上将会有更多性能开销。
CSS3 Animation不能高效的支持逐帧动画和 sprite sheet，当有sprite sheet动画需求时，可以使用JS框架例如CreateJS加载PNG序列来完成，或者使用更优秀的页游成熟的Flash starling stage3D处理sprite的方案。
对于老式浏览器不支持CSS3 Animation，可以考虑用JS操作DOM的方式来处理类似的动画需求。

对于一个前端交互人员，这几步的思路都不难理解，当然CSS3 Animation的工作流离Flash关键帧动画的制作流程的先进程度还差的很远很远，但是对于一项新鲜的技术，我们要抱有宽容理解的心态看待它的进化。各位看到这里已经可以基本了解CSS3 Animation的操作方式，如果对CSS3 Animation有学习的兴趣，可以通过以下的资源来获取更多信息：