CSS3 Transitions, Transforms和Animation的使用

一、前言

　　CSS3动画相关的几个属性是：transition, transform, animation；分别理解为过渡，变换，动画。虽意义相近，但具体的功能和在CSS3中承担的工作有一定的差异。

　　transition指过渡，就是从a点都b点，是有时间的，是连续的，一般针对常规CSS属性；transform指变换，包含几个固定的属性：旋转、缩放、偏移等等，但是，效果就是很干涩机械的旋转移动，如果配合transition属性，变换就会很平滑。animation最先使用于Safari浏览器，在官方的Introduction上介绍这个属性是transition属性的扩展。但是这个简单的介绍里面包含了不简单的东西：keyframes。

 

二、Transition

　　CSS3 transition属性是一个简单的动画属性，可以说它是animation的简化版本，是给普通做简单网页特效用的，其作用是：平滑地改变CSS的值。无论是点击事件，焦点事件，还是鼠标hover，只要值改变了，就是平滑的，就是动画。所以对于一个整站通用的class，可以很轻松的渐进增强地实现动画效果，很有实用价值。

比如你有以下两个样式：

.position{
    left:100px;
    top:100px;
}
.animate{
    -webkit-transition:left 0.5s ease-out;
    left:500px;
    top:500px;
}

 

其中animate的transition的属性的意思说：当你的left属性发生变化的时候，执行动画效果（仅仅基于left的属性变化，其他的属性不会加入到动画变化里面去）。

　　首先你的元素的css为position。当你将其cssList 增加 animate 或者替换position 为animate的时候，元素的属性变化，触发webkit-transition，以指定属性变化前的值为起始值，变化后的属性为结束值，执行动画效果。这是一个简单的两点变化过程，大大简化了animation属性的复杂程度。

　　同时，如果在transition的动画当中，属性值有了新的变化，则会中断当前的动画执行，并将中断时的属性值提供给新的动画作为起始值来计算新的动画效果。

 

而transition有下面些具体属性：

transition-property :    * //指定过渡的性质，比如transition-property:backgrond 就是指backgound参与这个过渡
transition-duration:    *//指定这个过渡的持续时间
transition-delay:    * //延迟过渡时间
transition-timing-function:    *//指定过渡类型，有ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier

例如下面这个很简单的例子：

.trans {
    -webkit-transition-property: background-color;
    -webkit-transition-duration: 0.3s;
    -webkit-transition-timing-function: ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

就跟CSS2的background属性一样，平时我们都不会像上面一样，把transition的属性一个一个摊开写，而是合并。

还是上面的例子，我们将transition属性合并，并扩展几个浏览器，如下CSS代码：

.trans {
    ...
    -webkit-transition: background-color 0.3s ease;
    -moz-transition: background-color 0.3s ease;
    -o-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.trans:hover {
    background-color: #486AAA;
    color: #fff;
}

　　transition中的transition-timing-function属性是十分重要的，其一堆ease相关的值（linear | ease-in | ease-out | ease-in-out | cubic-bezier），不太容易让人理解。

　　首先cubic-bezier这个基本上就不用管了，大部分情况都用不到这个东西（有想深入研究的同学自行研究，我绝对不会告诉你这是指贝塞尔曲线，与复杂的数学扯上了关系……）。Linear即线性。至于剩下三个，就是指缓动效果，说白了就是指开始时候慢慢动呢还是结束的时候慢慢动ease-in表示先慢后快；ease-out表示先快后慢；ease-in-out表示先慢后快再慢。

　　（注意：不管什么时候快什么时候慢最后都是同时到达，完成时间只与transition-delay属性有关）。

 

三、Transform

　　transform指变换，使用过PS的人应该知道里面的Ctrl+T自由变换。transform就是指的这个东西，即拉伸、压缩、旋转、偏移等等。

　　见下面示例代码：

.trans_skew { transform: skew(35deg); }
.trans_scale { transform:scale(1, 0.5); }
.trans_rotate { transform:rotate(45deg); }
.trans_translate { transform:translate(10px, 20px); }

　　transform属性要是加上transition的过渡特性，就是如虎添翼。例如下面这个例子，关键代码如下：

.trans_effect {
    -webkit-transition:all 2s ease-in-out;
    -moz-transition:all 2s ease-in-out;
    -o-transition:all 2s ease-in-out;
    -ms-transition:all 2s ease-in-out;    
    transition:all 2s ease-in-out;
}
.trans_effect:hover {
    -webkit-transform:rotate(720deg) scale(2,2);
    -moz-transform:rotate(720deg) scale(2,2);
    -o-transform:rotate(720deg) scale(2,2);
    -ms-transform:rotate(720deg) scale(2,2);
    transform:rotate(720deg) scale(2,2);        
}

　　结果在Chrome和 Safari浏览器下就有了祖玛里面青蛙挂掉时的缩放旋转效果了。

　   在部分的test case当中，每每演示transform属性的，看起来好像都是带动画。这使得小部分直觉化思维的人（包括我）认为transform属性是动画属性。而恰恰相反，transform属性是静态属性，一旦写到style里面，将会直接显示作用，无任何变化过程。transform的主要用途是用来做元素的特殊变形，对于做设计的人来说并不是很陌生，简单的来说就是css 的图形变形工具。

　　关于图形变形的基础条件当中的原点设定，在css里面使用的是transform-origin来定义的。这个定义的原点应该是该css作用的元素的左上角为0,0来计算的（有待研究）。其他的属性则根据这个属性来计算进行计算。

　　关于图形变化的模式，css3标准当中transform-style来定义。默认是flat，展现出来的是简单的效果。而preserve-3d则将空间呈现为3d模式。从正常的思维来说，应该只需要preserve-3d就好了，但是从谣传“开启了perserve-3d就使用了GPU加速”来说，这个属性可能是为了降低系统消耗用的，毕竟3d比2d要多一个维度的计算。

　　如果需要使用3d模式，必须先指定style为3d，并在任意父元素上增加 perspective 及perspective-origin 来指定透视点。

具体的给设计师改变元素样式用的属性则有以下五个：

　　translate3d(x,y,z) 是用来控制元素的位置在页面上的三轴的位置的；

　　rotate(deg)是用来控制元素旋转角度的；

　　skew[x,y](deg) 这个属性是用来制作倾斜度的，做过设计的人可能会知道，这个是用来在2d里面创建3d透视图的时候必须的属性；

　　scale3d(x,y,z) 用来放大缩小效果，属性是比值；

　　matrix3d，css矩阵。通过这个矩阵属性，涵盖了上面所有的属性值，但是个人觉得可读性极差（全都是数字和单位，背起来有点模糊），目前没有理由推荐使用。

　　总体看来 css transform的属性和原来使用的left ，right ，top， bottom 的属性从动静角度来说没有任何区别，因此使用的时候应该将transform归类到这类定位变形的静态属性里面。

 

四、Animations

　　做过Flash动画的人都会知道，Flash里面有两个基础武器：时间轴和关键帧。而css keyframes的出现，则是提供了flash世界里面的这两个属性的合集。看一个简单的 keyframes 的示例：

@keyframes 'wobble'{
  0%{
   left:100px
}
   30%{
   left:300px;
}
  100%{
   left:500px;
}
}
.animate{
    left:100px;
   -webkit-animation:wobble 0.5s ease-out;
   -webkit-animation-fill-mode:backwards;
}

　　上面这个代码展示了一个keyframes 'wobble'，其中 0％ 代表在变化中不同时间点的属性值，你可以较精确的控制动画变化中任何一个时间点的属性效果。而animation则根据这个keyframes提供的属性变化方式去计算元素动画当中的属性。与 transition 不同的是，keyframes提供更多的控制，尤其是时间轴的控制，这点让css animation更加强大，使得flash的部分动画效果可以由css直接控制完成，而这一切，仅仅只需要几行代码，也因此诞生了大量（比起flash来说算是大量了）基于css的animation tools，用来取代flash的动画部分。

　　另外在animation属性里面还有一个最重要的就是：animation-fill-mode，这个属性标示是以(from/0%)指定的样式 还是以(to/100%)指定的样式为动画完成之后的样式。这个很方便我们控制动画的结尾样式，保证动画的整体连贯。

 

　　看下面的代码示例：

@-webkit-keyframes resize {
    0% {
        padding: 0;
    }
    50% {
        padding: 0 20px;
        background-color:rgba(190, 206, 235, 0.2);        
    }
    100% {
        padding: 0 100px;
        background-color:rgba(190, 206, 235, 0.9);
    }
}
.anim_box:hover {
    -webkit-animation-name: resize;
    -webkit-animation-duration: 1.5s;
    -webkit-animation-iteration-count: 4;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;
}

　　此例子中，鼠标悬停时动画只执行4次。

　　效果大致如下，默认是个矩形框：

　　鼠标移上去后显示慢慢的宽度增加，然后突然快速的宽度增加，同时背景色加深，下为动画过程中的截图：

 

 

　　animations不仅适用于CSS2中的属性，CSS3也是支持的，例如box-shadow盒阴影效果，所以，我们可以实现外发光效果的。

 

 

　　发光效果如下：

CSS代码如下：

@-webkit-keyframes glow {
    0% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
        border-color: rgba(160, 179, 214, 0.5);         
    }
    100% {
        -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 1.0), 0 0 18px rgba(0, 140, 255, 1.0);
        border-color: rgba(160, 179, 214, 1.0); 
    }
}
.anim_image {
    padding:3px;
    border:1px solid #beceeb;
    background-color:white;
    -moz-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    -webkit-box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
    box-shadow: 0 0 8px rgba(72, 106, 170, 0.5);
}
.anim_image:hover {
    background-color:#f0f3f9;
    -webkit-animation-name: glow;
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    -webkit-animation-timing-function: ease-in-out;    
}

五、浏览器支持情况

CSS Transitions

首次引入

Safari 3.2: 13/11/2008

Firefox 4.0: Late 2010

Chrome 1.0: 02/09/2008

Opera 10.5: 02/03/2010

CSS 2D Transformations

首次引入

Safari 3.2: 13/11/2008

Firefox 3.5: 30/06/2009

Chrome 1.0: 02/09/2008

Opera 10.5: 02/03/2010

Internet Explore 9: 09/2010

CSS Animations

首次引入

Safari 4.0: 11/06/2008

Chrome 1.0: 02/09/2008

CSS 3D Transformations

首次引入

Safari 4.0: 11/06/2008

Chrome: 28/08/2010