《响应式web设计》读书笔记（五）CSS3过渡、变形和动画

         平时在浏览网页的时候经常会看到诸如“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>

 

CSS3过渡

      怎么样，效果不错吧？好吧，我承认我抄了书上的例子代码。。。不过，作为一个初学者我有一个疑问，不知你是否也会有。这个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;/*过渡放在这里*/
         }

效果如下：

CSS3过渡

         看出细微的差别来了吧。当鼠标移走的时候，这个过渡效果没了。所以这个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过渡、变形、动画的内容就以上这些了。通过这一章的学习，算是了解了基本用法，更多好的效果和动画还需要多多实践才行。接下来，我要把我的博客应用上一些今天学到的东西，算是一个小小的练手吧。代码就不在这里展示了，用你的高端浏览器来发掘吧~