平时在浏览网页的时候经常会看到诸如“CSS 3D效果”、“css3动画”之类的字眼，看过效果后觉得很神奇，但也一直没机会研究一下原理。因为真正项目中还没用到这些东西。但这些新的技术在不久的将来必定是要大放异彩的，这是标准的一部分呀，一定有步入正轨的那一天。趁着阅读《响应式web设计》这本书，来把这部分知识学习一下。
Javascript动画VS CSS动画
用js写的动画大家都不陌生了，使用jQuery或者其他框架可以方便的制作出各种动画效果。那我们为什么还要用CSS来做动画呢？它有哪些优势呢？
首要功绩便是效率。如果一个新手用js写了一个简单的动画效果（比如鼠标悬停），作为一个自称是完美主义者的前端工程师，当然是无法忍受的。如果winter大大在场，必会指着鼻子问：你要用脸盆来喝水吗。显然，调用javascript引擎来为元素渲染样式真是太浪费资源了。
其次呢，其次。。。还有什么优势呢？我竟然想不来了，作者也没有提。真是尴尬，本来想好好捧一下CSS动画的。对不住你了。。。不过就单单提高效率这一点来说，也值得我们好好利用它了。因追逐高效率而造成一些产品或企业兴衰更迭并不少见。
先说CSS3过渡
过渡，可以理解为从一个状态缓缓变为另一个状态，包含整个变化过程。CSS3的过渡效果通过transition这个属性完成。它的取值是以下四个属性值的缩写：
transition-property:要过渡的属性名称，如background-color。设为all时过渡会被应用在每一个可能的属性上。
transition-duration:过渡的持续时间，单位为秒。
transition-timing-function:定义过渡期间速度如何变化。取值有：ease,linear,ease-in,ease-out,ease-in-out,cubic-bezier。它们是一些贝塞尔曲线，具体可参考http://cubic-bezier.com
transition-delay:定义过渡开始前的延迟时间。如设置为1s，则过渡效果在1秒后开始。也可以设为负值。此时过渡会立刻开始，不过过渡效果的起点为原效果的1s后。（就是说过渡在开始之前已经悄悄跑了1秒，你没看见）
你可以像使用background一样简写这些属性，例如：transition:all 1s ease 0s。当然，也有拆开写的时候，比如你想指定过渡某几个属性，并且让它们步调不一致，可以这么写：
transition-property:border,color,text-shadow;
transition-duration:2s,3s,8s;
好了，关于过渡的知识点就这些。我已经开始要迫不及待的试一试了。写个小例子来看看。CSS代码：
#btn{ background-color:#b01c20; font-size:3em; border-radius:8px; color:#FFF; padding:3%; background:linear-gradient(90deg,#b01c20 0%,#f15c60 100%); box-shadow:5px 5px 5px hsla(0,0%,26%,0.8); text-shadow:0 1px black; border:1px solid #bfbfbf; transition:all 1s ease 0s;/*就用在这里啦*/ } #btn:hover{ border:1px solid #000; color:#000; text-shadow:0 1px white; }
Html代码：
<a id="btn" href="#">CSS3过渡</a>
怎么样，效果不错吧？好吧，我承认我抄了书上的例子代码。。。不过，作为一个初学者我有一个疑问，不知你是否也会有。这个transition属性为什么放在#btn里面而不放在#btn:hover里面呢？既然是鼠标移上去之后才开始过渡效果，那应该放在#btn:hover里才对。
那我就来放放看：
#btn2{ background-color:#b01c20; font-size:3em; border-radius:8px; color:#FFF; padding:3%; background:linear-gradient(90deg,#b01c20 0%,#f15c60 100%); box-shadow:5px 5px 5px hsla(0,0%,26%,0.8); text-shadow:0 1px black; border:1px solid #bfbfbf; }
#btn2:hover{ border:1px solid #000; color:#000; text-shadow:0 1px white; transition:all 1s ease 0s;/*过渡放在这里*/ }
效果如下：
看出细微的差别来了吧。当鼠标移走的时候，这个过渡效果没了。所以这个transition应该这么理解：定义元素的属性在发生变化时候的过渡效果。而不是：在变化的时候定义元素的过渡效果，所以从元素一生下来的时候就应该定义好了。
加点小料
如果你是响应式设计的爱好者，一定会有这个习惯，看到一个不错的网站时，会忍不住拖动浏览器窗口的大小，看看它到底是如何响应视口的变化的。来看这个站点http://css-tricks.com。试着调整你的浏览器窗口，你会发现当布局发生变化时，都不是硬生生的蹦过去的，而是如飞舞一般过渡完成。这时你会心一笑。请不要小看这一点，对于一个用户体验设计师来说，这种能触动到用户内心的会心一笑是十份宝贵的，哪怕只是一个瞬间。好了，你是不是已经猜到这是如何实现的了呢？很简单的一行代码：
*{ transition:all 1s;//所有元素的所有属性在发生变化时，都加1秒的过渡效果 }
2D变形
变形要用到的属性是transform，会不会觉得跟过渡（transition）有点像呢？确实，它们俩的概念也有点容易混淆。变形是指从一种形状变为另一种形状，更强调变化前后的区别，而过渡是指变化的整个过程，更强调期间经历的过程。作者举了个例子，变形金刚擎天柱从汽车变形（transform）为机器人，中间要经过咔咔咔的过渡（transition）。
来看看我们都能进行哪些变形呢？transform的取值有：
scase:用来缩放元素，放大或缩小
translate：移动元素，可沿上下左右四个方向
rotate：旋转元素，单位为角度
skew：沿X轴或Y轴对元素进行斜切
matrix：以像素精度控制变形效果
下面我就来挨个试一下，所用到的html代码为
<a href="#" id="link">我要变形了</a>
transform:scale(1.5);
transform:translate(40px,0);
transform:rotate(90deg);
transform:skew(10deg,2deg);
transform:matrix(1.678,-0.256,1.522,2.333,-51.533,-1.898);
如果你的浏览器支持2D变形，相信已经看到效果了。合理利用这些变形能够制造出很多意想不到的效果。
把变形和上一节的过渡结合起来使用，可以产生柔和的变形效果，通过下面这段代码，你也将会更加清楚变形和过渡的区别。
加了过渡的变形：
#link6{ font-size:3em; text-decoration:none; display:inline-block; transition:all 1s ease 0s; } #link6:hover{ transform:skew(10deg,2deg); }
未加过渡的变形
#link7{ font-size:3em; text-decoration:none; display:inline-block; } #link7:hover{ transform:skew(10deg,2deg); }
补充说明：a标签一定要display:inline-block;才可以行的通。不晓得为什么，郁闷。另外为了获得浏览器的兼容，请自行加前缀。
另外还有一点需要说说，就是这个矩阵变形matrix，到底该怎么用呢？例子中那么多乱七八糟的数字是怎么得来的呢？事实是，它确实是有难度的，需要有数学知识才能计算出这些值了。作为初探css变形，我就不深究这个细枝末节了。如果有需要使用特殊一点的形变呢？有个现成的工具可以利用，http://www.useragentman.com/matrix/。可以让你通过傻瓜化的拖动操作，根据你拖动后的形状来为你生成公式。有兴趣可以试试哟。
3D变形
越来越高级了哦。3D变形有着广阔的前景，但现在的支持度还不是很高，所以也不能做大规模推广，只能为网页增加渐进增强的效果。书上作者通过一个例子讲解了如何使用3D变形，我也打算亲手试一下这个例子，开始吧。
Html代码如下：
<div id="imgcontainer"> <div id="imgcontent"> <div id="imgfront"> <img src="http://e.hiphotos.baidu.com/album/w%3D2048/sign=d2bdb329adaf2eddd4f14ee9b92800e9/bd315c6034a85edf2905330c48540923dd547510.jpg" width="100%" /> </div> <div id="imgback"> 人物介绍:汤唯 </div> </div> </div>
CSS代码如下：
#imgcontainer{ width:200px; height:300px; position:relative; perspective:200; perspective:800; } #imgcontent{ width:100%; height:300px; transform-style:preserve-3d; transition:1s; box-shadow:2px 2px 2px black,-2px -2px 2px black; } #imgcontainer:hover #imgcontent{ transform:rotateY(180deg); } #imgcontainer:hover #imgback{ visibility:visible; } #imgfront{ width:100%; height:300px; position:absolute; backface-visibility:hidden; } #imgback{ width:200px; height:280px; padding-top:20px; transform:rotateY(180deg); visibility:hidden; transition:all 0.5s ease 0.5s; }
效果就是上面这个样子啦，所有用到的css属性都在代码中注释说明了。能否看到相应的效果就得看您的浏览器的能耐了。正如作者所说，3D变形尚未成熟。在视口宽度变化时也不能很好的展现正确的效果。未来的成熟以及稳点，让我们拭目以待。
CSS3动画
如果你有flash基础，那做起css动画来讲简直就太简单了，因为css动画也是基于关键帧技术。即无需定义整个动画过程，只需定义好关键点的样式，其他的工作都由浏览器完成。关键帧的定义语法如下：
@keyframes shadowwords{ 0%{ text-shadow:0 0 4px red; } 50%{ text-shadow:0 0 20px red; } 100%{ text-shadow:0 0 4px red; } }
这里我定义了一个名为shadowwords的关键帧，这个名字是可以随便取的。通过百分比值来定义不同阶段的样式。这里我让它的文字阴影进行变化。定义好关键帧后，就可以在样式中使用它了。像这样：
#shanshuo{ font-size:4em; color:#F2050G; animation:shadowwords 1.5s infinite ease-in; }
然后在html代码中就可以使用该类了：
<div id="shanshuo">闪烁文字</div>
效果如下：
上面的animation也是缩写的形式。完整的属性包括以下几个：
animation-name:关键帧名称
animation-duration:动画持续时间
animation-timing-function:速度变化函数
animation-iteration-cound:动画循环次数，设为infinite无限循环
animation-play-state:控制动画的播放和暂停。取值为running和paused
animation-delay:开始前的延时
animate-fill-mode:设置对象的状态。取值为none | forwards | backwards | both
书上的知识点就这些啦，基本可以算师傅领进门的级别了。如果有更好的创意，可以将过渡、变形结合起来，打造更加绚丽的效果。更多关于CSS3动画的内容，可以访问官网http://dev.w3.org/csswg/css3-animations
所有关于CSS3过渡、变形、动画的内容就以上这些了。通过这一章的学习，算是了解了基本用法，更多好的效果和动画还需要多多实践才行。接下来，我要把我的博客应用上一些今天学到的东西，算是一个小小的练手吧。代码就不在这里展示了，用你的高端浏览器来发掘吧~