CSS3过渡、变形和动画

原文-——Responsive Web Design with HTML5 and CSS3

1.什么是CSS3过渡以及如何使用它

我们在给超链接设置样式时，一般都会设置一个悬停状态（hover）的效果，这种方法能明显地提醒用户他的鼠标指向的是一个超链接。虽然对越来越多的触摸屏设备没太大用处，但无论如何，这种方法对网站和用户之间的交互是非常简单实用的。

通常，使用CSS时悬停状态就是一个开关。他默认有一个状态，然后在鼠标悬停时马上切换到另一种状态。但是使用CSS3过渡，正如其名字所暗示的，可以让元素从一种状态慢慢切换到另一种状态。这种转换并不局限于悬停状态，但可以从悬停讲起。

我们来给按钮增加一个悬停效果：

a:hover{
    border:1px solid #000000;
    color:#000000;
    text-shadow:0px 1px white;
}

这样就给鼠标悬停时简单地修改了一下文字、文字阴影以及边框的颜色。所以，你可以能想象出来，使用这段CSS代码，当鼠标悬停在按钮上面时，按钮会直接从第一种状态（白色文字）突变到第二种状态（黑色文字）——就是一个开关效果。我们来给第一段CSS规则添加一点CSS3魔法：

a {
    /*……原来的样式……*/
    transition:all 1s ease 0s;
}

再把鼠标悬停在按钮上，文字、文字阴影和边框阴影的颜色都会从第一种状态平滑过渡到第二种状态。注意，这里把过渡元素应用到了元素而不是悬停状态上。这样做是为了让元素的其他状态（如:active）也能设置不同的样式并拥有类似的效果。 所以请记住，过渡声明要放在过渡效果开始的元素上。那过渡是怎么发生的呢？

1.1过渡相关的属性

CSS3过渡效果涉及四个属性，也可以使用包含这四个属性的缩写。

transition-property:要过渡的CSS属性名称（比如background-color、text-shadow、或者all，使用all则过渡效果会被应用到每一个可能的CSS属性上）；

transition-duration:定义过渡效果持续的时间（时间单位为秒，比如.3s、2s或1.5s）；

transition-timing-function:定义过渡期间速度如何变化（比如ease、linear、ease-in、ease-out、ease-in-out或cubic-bezier）；

transition-delay:可选，用于定义过渡开始前的延迟时间。相反，将该值设置为一个负数，可以让过渡效果立即开始，但过渡旅程则会从半路开始。

单独使用各种过渡属性创建转换效果的语法如下：

a{
    ……其他样式……
    transition-property:all;
    transition-duration:1s;
    transition-timing-function:ease;
    transition-delay:0s;
}

1.过渡的简写语法

正如我们之前所见过的那样，我们可以将单个的声明组合成一个简写版：

transition:all 1s ease 0s;

使用简写语法时要注意，声明的第一个时间值总被应用给transition-duration，第二个时间值总被应用给transition-delay。

和以前一样，别忘了浏览器私有前缀。

2.在不同时间段内过渡不同属性

当一条规则要实现多个属性过渡时，这些属性不必步调一致。看看下面的这段代码

a{
    ……其他样式……
    transition-property:border ,color,text-shadow;
    transition-duration:2s,3s,8s;
}

此处我们通过transition-property来指定只过渡border、color和text-shadow，然后在transition-duration声明中我们设定边框过渡效果应该2秒内完成，文字颜色3秒，文字阴影8秒。由逗号分割的过渡持续时间按顺序对应上面的CSS属性。

3.理解过渡调速函数

大多数过渡属性都能一看就知道是什么意思。前面其实已经介绍了过渡相关的几个CSS属性。其中，过渡持续时间和延迟时间都是以秒为单位的时间值，所以也很好理解。但过渡调速函数就有点让人摸不着头脑了。ease、linear、ease-in、ease-out、ease-in-out以及cubic-bezier这些东西是用来做什么的？他们其实都是某种贝塞尔曲线，本质上就是缓动函数。我估计这样讲你还是不太明白。这样说吧，这其实就是那种用文字很难表达的概念，就像你不得不给女朋友解释清楚为什么你忘记了她的生日一样！所以我就不白费口舌了，还是请读者直接开这里吧。

这个网站能让你对比查看各种调速函数，看到他们的区别。不过，即使你闭着眼睛都能写出贝塞尔曲线，在实际使用中，它们的效果也确确实实没太大区别。为什么呢？

和任何增强效果一样，使用过渡效果也必须长个心眼儿。在现实当中，如果过渡效果持续的时间过长，会让网站感觉很慢。导航链接用整整5秒完成过渡，只会让你的用户骂娘而不是赞叹。因此，除非有什么特殊的理由，否则使用快速（1s）的默认过渡（ease）效果往往最好。

1.1.2 响应式网站中的有趣过渡

一旦变成响应式设计的发烧友，你就会发现自己在浏览网页时总要调整一下浏览器窗口大小，以此确认该网站是不是响应式的。但这种习惯可能会激怒“普通”人，所以最好私下里做这件事。

我经常访问的一个讨论CSS技术的好网站是Chris Coyier的http://css-tricks.com。在它重新设计之后，我浏览时碰巧调整了浏览器窗口，在看到众多元素在屏幕上飞舞时，我露出了会心的微笑。Chris给网页施了什么魔法使其具有了这种效果》其实代码如下：

*{
    transition:all 1s;
}

此处，我们使用CSS通配符*来选择页面所有元素，然后为所有元素都设置一个耗时1s的过渡效果。声明中省略了过渡调速函数，浏览器默认会使用ease；声明中同样省略了延迟时间，浏览器默认使用none，所以过渡效果不会延迟。最终效果什么样？大多数效果和你所期望的一样。不过，因为元素都被应用了过渡，自然也就包括媒体查询中的规则，所以当浏览器窗口大小发生变化时，页面元素将从一中排列方式过渡到另外一种排列方式。必须这么做吗？当然不是！但这种效果是不是既好看又好玩？没错！因为性能问题，该网站的最新版CSS代码中已经去掉了这行代码。

2 CSS3的2D变形

虽然两个英文单词发音相似，但CSS变形（transformation，包括2D变形和3D变形）和CSS过渡（transition）完全不同。我们来给a标记添加一个2D变形：

a:hover{
    transform:scale(1.7);
}

我们告知浏览器当鼠标悬停在链接上时，将其放大到原始大小的1.7倍。

现在如果你尝试在Safari浏览器中添加这种规则，须注意它需要应用该规则的原始元素必须以块状显示。示例如下：

a{
    display:block;
}

不这样做的话什么效果都没有。

我们能做哪些变形

有两种可用的CSS3变形：2D变形和3D变形。2D变形的实现更广泛，浏览器支持更好，写起来也更简单些，所以我们先来看看2D变形。CSS3的2D变形模块允许我们使用下列变形。

scale：用来缩放元素；

translate：在屏幕上移动元素

rotate：按照一定角度旋转元素；

skew：沿X和Y轴进行斜切；

matrix：允许你以像素精度来控制变形效果。

接下来我们逐个试验一下，看看会有什么效果。

1.scale

我们前面看到过这种变形效果。但是除了我们刚才使用的正整数值，还要知道使用小于1的值可以缩小元素；下面的代码就会将元素缩小一半：

transform:scale(0.5);

2.translate

transf:translate(40px,0px)

translate会告知浏览器按照一定度量值移动元素，可以使用像素或百分比。语法是第一个值表示从左向右移动的距离，然后是从上往下移动的距离。正值会让元素向右或向下移动，负值则会让元素向左或向上移动。所以本例中对元素的声明效果是：连接在鼠标悬停时水平向右移动40像素。

3.rotate

transform,:rotate(90deg)

rotate允许你旋转一个元素。

4.skew

如果你多少有点Photoshop经验，就会知道skew是怎么回事，它会让元素在一个或两个轴上变形偏斜。

transform:skew(10deg,2deg);

5.matrix

matrix变形的语法看起来超复杂：

transform:matrix(1.678,-0.256,1.522,2.333,-51.533,-1.989);

他基本上能让你将若干变形效果组合成单个声明。要完全理解矩阵你得了解相关的数学知识：http://www.w3.org/TR/css3-2d-transforms/#cssmatrix-interface。

傻瓜化的矩阵变形工具

无论怎么想象我都不是一个数学家，所以当我需要创建矩阵变形时，我一般都走捷径。如果你的数学也不太好，我建议你访问这里：http://www.useragentman.com/matrix/。

6.transf-origin属性

在使用上述变形效果的同时，你还可以使用transform-origin属性来修改变形效果的起点：

transform:rotate(45deg);

transform-origin:20% 20%;

将上面的规则应用到链接上，这个属性提供了一种方便的方法来移动变形的中心点。

以上讲述了2D变形的基本要素。比起3D变形，2D变形在浏览器中被广泛支持，它为我们提供了一种轻量便捷的方法，让现在浏览器的用户体验得以锦上添花。

3 尝试CSS3的3D变形

webkit浏览器和firefox 10+都已支持CSS3的3D变形，但最新的IE10都还不支持该特性。尽管缺少桌面版的浏览器的广泛支持，但多亏了移动平台浏览器基本都是webkit血统，所以3D变形在Android和iOS上均被支持。

从这点上来讲，你最好在Webkit核心浏览器中测试网页效果。

现在我们开始尝试3D变形。这是一篇广阔天地，有几乎无穷的可能性。我想象着有一天3D变形被广泛支持，我们就可以用它来做图片轮播效果，而不用再以来jQuery等javascript方案了。不过，在那一刻到来之前，我们先来体验一下。

3.1 分析3D变形效果

第一个要点是在父级元素上设置透视。这样就开启了3D场景：

div{
    perspective:200;
}

透视值越大，就表示你的试点与3D场景之间的景深越大。因此，如果想要一点隐约的3D效果，就增大透视值；如果想要非常明显的3D效果，则减小透视值。

下一个要点：

div div{
    transform-style:preserve-3d;
}

div中添加的透视声明只会应用到其第一个子元素上。因此，为了延续父元素的透视，我们给div->div元素设定了preserve-3d。

接下来，当鼠标悬停在div->div元素上时，我们给他增加一个翻转效果：

div div{
    transform:rotateY(180deg);
}

接下来的规则用来处理当海报翻转之后隐藏在其背后内容：

.face{
   position:absolute;
   backface-visibility:hidden;
}

.face必须使用绝对定位，这样海报才能盖在.back这个div的上面：

.back{
    transform:retateY(180deg);
}

最后，我们给.back这个div加上rotateY。不加这句的话，.back这个div就会显示在正。

这就全部做完了。将鼠标移到div->div上就会看到酷炫的3D效果了。

3.2 3D变形尚未成熟

根据我的实践经验，目前大多数3D变形在使用百分比尺寸时效果都不太好。所以现在要让3D变形在响应式布局中呈现完美效果还有一些问题。此外，由于浏览器的支持有限，在制作跨浏览器网站时，3D变形无法提供健壮的解决方案。目前，我依然使用jQuery或类似技术来制作这种变形效果。但是CSS3 3D变形的前途是光明的，当浏览器开始广泛支持时，他就为我们提供了一次难得的机遇，让我们可以将现在依赖于JavaScript的优雅效果一直到样式表中。

4 CSS3动画效果

如果你只做过Flash动画，那CSS3动画你也能立即上手。CSS3沿用了在Flash和其他基于时间线的应用程序中被广泛使用的动画关键帧技术。

相较于3D变形，CSS3动画的浏览器支持度更高。Firefox5+、Chrom、Safar 4+、Android、iOs均支持，IE10也决定加入该行列。

CSS3动画由两部分组成：首先是关键帧声明，然后在动画属性中使用该关键帧声明。

上一节我们制作了一个简单的翻转效果，用于展示我对电影的评判结果。但是翻转效果的背面文字非常丑陋，所以我们来给这些文字添加一个有趣的闪烁效果。

@keyframes warning{
    0%,100%{
        text-shadow:0px 0px 4px #000000;
    }
    50%{
         text-shadow:0 0 20px #000000;
    }
}

此处的代码没有加前缀，如果浏览器中没有效果，你可能需要添加一组完整的浏览器私有前缀。

我们来分析一下：

首先我们定义了一个@keyframe声明。然后为这个特定的关键帧声明设置了一个名称：warning。你可以叫成任何名字，但考虑到这些关键帧声明可以在多数元素上复用，所以建议取一个合理的名字。

可以设置多个关键帧，或者也可以用from和to值来定义动画的开始和结束帧。

我们已经声明了关键帧，接下来可以在动画属性中引用它：

.back h5{
    animation:warning 1.5s infinite ease-in;
}

在animation属性之后，我们设定了要使用的关键帧warning，然后设定了动画的持续时间1.5s，之后设定了animation-iteration-count为infinite，即循环播放，最后设定了调速函数ease-in。访问这里查看效果。

css3动画缩写语法可以接受全部7个独立动画属性的值。除了上例中使用的之外，还可以设定animation-delay（动画开始前的延时），animation-play-state（值可以是running或paused，用于控制动画的播放或暂停），最后还有animation-fill-mode，这个属性我到现在还没有找到用武之地。

5 小结

有关CSS3过渡、变形和动画的内容，足足可以写好几本书。但是我希望通过本章蜻蜓点水般的学习，你能了解他们的基本知识并让他们运行起来。其实，我们采用CSS3新特性和技巧的最终目的，是想使用CSS3来代替Javascript制作一些优雅精美的增强效果，从而使响应式设计的代码更加简洁、效果更加丰富。本章我们学习了CSS3过渡是什么，以及如何编写相应代码，了解了ease、linear等调速函数，并在响应式设计中应用他们制作了简单但有趣的效果。还学习了缩放、斜切等2D变形，以及如何将它们与过渡组合使用。此外，还在学习CSS3动画的强大功能与简洁语法之前，简单了解了3D变形。你要相信自己的CSS3功力正在不断增长。

但是，如果网站设计中有一个领域是我尽可能避免谈及的，那肯定就是表单。我不知道为什么，只是一直觉得制作表单是件单调乏味的事儿，当我知道了HTML5和CSS3可以让表单的制作、美化甚至验证过程都比以往简单得多时，简直把我给乐坏了。我高兴的都手舞足蹈了，相信到时候你也会跟我一样。下一张我们就来学习HTML5表单。