CSS3 过渡
之前学习的CSS3的部分，大部分都是对静态元素的增强。CSS3还增加了一系列动画交互效果，而且无需使用JavaScript或Flash。使用CSS的过渡需要的资源要少很多。
关于CSS3过渡和动画，可以参考阮一峰的博客
过渡属性transition是新增的一个通用的属性，类似于JS里的一个事件，只要属性值发生变化，都会触发过渡效果。对过渡的一些属性进行设置，就可以最终实现过渡效果。
transition可以用在所有元素上。
transition
transition和font，border之类一样也是一个复合属性，其中的属性有：
- transition-property 指定过渡或动态模拟的CSS属性
- transition-duration 完成过渡所需的时间
- transition-time-function 指定时间曲线
- transition-delay 指定过渡效果出现的延迟时间
- 在简写的时候，第一个事件会被解析为duration，第二个会被解析为delay
transition-property
这个属性的意思就是指定某个属性，当这个属性产生变化的时候，就会按照transition里边的设定来变化。
这个属性能取的值有：
- none 没有指定任何样式
- all 默认值，表示指定元素所有支持transition-property属性的样式。
- 单个具体的属性名 只针对这个属性应用过渡效果
并不是所有的样式属性都能够被transition支持，需要一些以数值作为参考的属性才可以，主要有：
- 所有的颜色属性
- 具有长度值和百分比以及大小的属性
- 离散的整数，比如outline-offset，z-index等，从一个数字变化到另外一个数字。
- 浮点型表示的属性，比如opacity，font-weight等
- 变形系列属性
- rectangle等通过数值变换的属性，比如crop
- visibility 0-1也可以
- 阴影，比如text-shadow属性
- 渐变，但是必须设置相同的开始和结束便于线性过渡
还有很多属性，这里有所有支持transition的属性列表。
transition-duration
设置过渡时间，如果只写数值，表示毫秒数。可以加s表示秒数。如果设置为0，则无动画效果，直接变化。
duration的最大用途在于可以单独指定各个样式属性的变化时间，这样就给CSS的效果变化带来了时间轴的概念，HTML页面的一部分也可以像PPT幻灯片一样进行点击后开始播放的操作。
transition-time-function
这个属性表示变化进行的平缓程度，用通俗的说法就是动画的变化速度，是先快后慢，还是匀速，还是更加精确和复杂的变化方式。
可以指定默认设置好的单一变化函数，用函数名称作为值：
- ease 默认值，从快到慢
- linear 线性，速度一样
- ease-in 反向的ease，从慢到快，称为渐显效果（和实际元素样式的显和隐没有关系）
- ease-out 有点类似于ease但是有不同，称为渐隐效果（和实际元素样式的显和隐没有关系）
- ease-in-out 先减速，然后加速，接近结束的时候再减速，称为渐显渐隐效果。
贝塞尔曲线和step()的内容如果用到可以回来学习。
transition-delay
这个的基本用法和时间是一样的，特别之处在于支持负数，如果设置为负数，元素的过渡动作会从0的时间点开始显示，之前的时间会被截断。
transition这个属性的支持很好，可以放心使用。
transition也支持多个属性连写，每一组属性之间用逗号隔开，这样就不用写太多行的transition。
触发过渡效果
单独写transition在一个选择器的样式里是无法触发的，必须通过交互事件即用户的行为触发。这里需要理解的是，transition监听的是那个属性的变化，而不是触发属性改变的事件。实际的流程是：用户行为-->属性变化-->触发transition
主要的触发手段有：
- 伪元素触发，比较常用
- 媒体查询触发
- JS触发，通过JS代码切换一个元素的类，如果类里边定义了过渡属性，这个时候就会触发。
-
resize
这个属性允许用户通过拖动来改变元素的大小，经常用在textarea等表单元素。有五个值可以选一个：
- none 用户不能修改元素大小
- both 用户可以同时修改高度和宽度
- horizontal 用户只能修改宽度，不能修改高度
- vertical 用户只能修改高度，不能修改宽度
- inherit 继承父元素的设置
-
outline
CSS2中就有了outline，outline不会影响布局。outline的属性如下：
- outline-color 轮廓颜色
- outline-style 轮廓线样式，省略就是none即无轮廓
- outline-width 轮廓线的宽度，省略了就是medium即中等程度的轮廓线
- outline-offset 表示偏移量，正数表示向外偏移，负数表示向内偏移。这个属性是CSS3新增的。
- inherit 继承父元素的outline
补充
transition属性的位置：
- 如果想要元素变化到目标状态，鼠标移走再变回来，transition必须写在初始的样式里，这样一旦变化才有效果。
- 变化完成后立刻复原状态，则transition需要写到触发部分对应的代码中，比如写在伪类中。
- 如果要单独设置变化和复原的时间和状态，变化到目标状态的transition写在触发样式中，而复原的代码写在初始效果中。
- 如果想让状态不再变化回去，除了使用JS代码永久改变之外，还可以在复原的时间里把delay时间设置的非常长，就可以达到该效果。
transition在单个元素的变化上确实好用，让很多特效不用再通过复杂的CSS甚至JS代码互相配合。但是transition的局限性在于必须要触发，触发后在于只能执行一次，而且必须从开始变化到结束，没有任何中间状态。
所以CSS3还有更强力的工具，就是animation，不过目前只学了过渡，在加上2D和3D变换之后，就可以学习animation来制作动画了。