前言：通过之前的文章，我们已经学习了css3里面的一些常见样式，包含：盒模型，边框，圆角，阴影，伪类，背景等。这些在平时的网页制作中的使用频率很高。今天我们要开始介绍css3中的一些颠覆性的效果，过渡就是其中的代表之一。
我们首先来看一个需求：之前我们实现了鼠标移到某个漫画图片上的时候，为这个结构块添加了边框阴影，这种效果也不可以。但是我们在一些网站中可能会看到，他们实现的效果不仅仅会有边框阴影这种易于分辨的效果，而且还会对当前结构块进行突出展示，以期望有更好的用户体验(用户可以更明确当前的操作位置)，如：
这篇文章最终就是要实现这个效果的，里面主要使用就是我们之前介绍过的transform变换和今天所要讲的transition过渡了。
什么是transition过渡呢？transition可以实现当元素的样式从一种状态变成另一种状态的时候，产生平滑的过渡效果，简称过渡动画！在CSS3出现之前，网页上的动画大多是用flash或者js来实现的，flash动画会产生很大的弊端,如操作不便，一些浏览器不是很支持等，而使用js实现这种过渡动画的效果，那酸爽，你们可以想像的...
那过渡效果到底如何实现呢？首先我们来实现一个简单的效果，我有一个元素，现在我将它的宽度从1000px修改到100px,如果没有添加过渡效果，那么当宽度变化的时候是一闪而过，压根没有宽度变化的过程，我想要这种效果：能够看到宽度变化的过程！
好吧，废话不多说。。开始我们的过渡之旅吧。
首先来看一下实现过渡的常见属性：
transition-property：设置需要添加过渡效果的 CSS 属性的名称。
transition-duration：设置完成过渡效果需要的时间，以秒做为默认单位，默认值为0，如果为为不会产生过渡效果。
transition-timing-function：设置过渡效果完成时的速度曲线，如先快后慢，先慢后快，匀速等，默认值为ease(慢速开始，然后变快，然后慢速结束)。
transition-delay：设置过渡效果的延迟时间，就是触发操作之后延迟多少时间才真正开始过渡效果，默认值为0到这里，我们就可以为之前的宽度变化的效果添加过渡了：
transition-property:width;// 需要为宽度的变化添加过渡效果
transition-duration:1s;//过渡效果完成所需要的时间
transition-timing-function:linear;//过渡效果完成的速度曲线，linear为匀速
transition-delay:0s;// 设置过渡效果的延迟时间，这里不延迟
当然了，如果每次为元素添加过渡效果都要写这么多代码，那就要命了，有没有更简单的方式呢？当然有，下面就介绍一下简写方式(注意属性值以空格分隔)：
transition: property duration timing-function delay;这里要说是下这四个属性的顺序，特别是duration和delay,因为它们都是可以以秒做为单位 ，所以在设置的时候，会认为第一个以秒做为单位的值是duration,第二个才是delay.
我们使用简写方式将上面的效果再来一次：
transition: width 1s linear 0s;发现结果完全一样，是不是这种写法爽了很多？嗯，这就是以后添加过渡时的常见做法啦！！
注意啦：在你们进行练习的时候，可能会发现transition-property并不是支持所有的样式属性，没错啦，它所支持的属性大致有：
width、height大小类的属性
color类的属性（background-color/border-color/color等）
margin、padding边距类的属性
position定位类的属性（left、top、background-position等）
z-index/text-shadow/textindent/opacity/visibility/transform等
所以你如果想为类似于display:block这种样式添加过渡效果。。呵呵，死了这条心吧~~知道了如何添加过渡效果之后，我们将上面属性中的transition-timing-function的属性值做一个简单的介绍，你只需要掌握在需要的时候设置正确的值就可以了。
| 值 | 描述 |
|---|---|
| linear | 规定以相同速度开始至结束的过渡效果--匀速 |
| ease | 规定慢速开始，然后变快，然后慢速结束的过渡效果--默认值 |
| ease-in | 规定以慢速开始的过渡效果 |
| ease-out | 规定以慢速结束的过渡效果 |
| ease-in-out | 规定以慢速开始和结束的过渡效果 |
| cubic-bezier(n,n,n,n) | 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
到这里，有小伙伴可能要说了，如果我想要宽度的变化的过渡效果，又想要颜色变化时也有过渡效果，那如何实现呢？不着急，正面就来介绍下如何为多个状态变化同时添加过渡效果。
如需向多个状态添加过渡效果，就分别添加这些状态的过渡效果，以逗号分隔就行了，如
transition: width 1s linear 0s,background-color 2s linear 0s;这样就为width的变化和颜色的变化都添加了过渡效果了，并且细心你们应该发现，不同状态的过渡效果的属性设置是独立 ，并不会相互的影响和干扰，是不是很方便~
到这个时候为止了，我们就已经大致了解了过渡效果的添加过程，那么是时候在卡其漫画中页面中实现我们文章开头时看到的效果了！
首先我们添加鼠标上移的样式，让a元素能够有变换效果
.grame .grame_content li:hover > a {
box-shadow: 0px 0px 3px 0px #f00;
position: absolute;
top: -2px;
left: 0;
/* 添加变换 */
transform: scale(0.95,0.95);
}
现在还没有添加过渡效果，所以它的变换瞬间完成，体验不好，是时候为a元素的transform添加过渡效果了：
.grame .grame_content li >a {
width: 100%;
display: block;
border:1px solid #eee;
border-radius: 6px;
padding-bottom: 5px;
/* 设置transform的过渡实现 */
transition: transform 0.3s;
}再次打开页面，嗯，效果感觉好多了！！
从这个文章可以体验出，过渡效果的添加确实很方便，可以说，css可以当成js来使用了。但是我们也要清醒的认识到，过渡效果还是有它的局限性的。
首先：transition需要事件触发，它并不能自动的触发，也就是说不能主动触发，只能被动触发。这也是上面的代码中我们使用到了伪元素的原因
其次：transition是一次性的，执行完毕后恢复到原始状态就停止了，如果需要再次执行，就必须再次手动的触发
最后：从上面的效果中可以看出，过渡效果只能定义开始和结束时的属性值，不能定义中间状态，也就是说只有两个状态，如果需要控制状态变化的中间其它状态，那过渡就显得力不从心了。在下一篇文章中，我们将会介绍动画animation,这就可以更自由的控制状态变化的时间过程了。我们下一篇文章见哦！！
