Transition and animations
贝塞尔曲线在线工具(需翻墙)
贝塞尔曲线在线工具(无需翻墙)
在线示例
CSS3 Transitions Module
CSS3 Animations Module
图灵 markdown中插入表格
excel转成table
Transitions
CSS2.1没有中间状态，当一个属性的值发生改变，这个变化是突然的(生硬的)。transition可以让这种变化更平滑。
transition是个implicit动画，只有当属性的值发生改变时才会被触发。
transition要发生，需要四个条件：一个初始值，一个结束值，transition属性，一个触发器。触发器可以是，通过JS或元素的:hover伪类来改元元素要被过渡的属性。
transition-property
transition-property指定一个元素的哪些属性将会产生过渡动画效果。
语法：
E { transition-property: keyword; }
keyword可以是all、none或是一组有效的css属性，默认值是all，就是说所有属性都会产生过渡动画效果。
transition-duration
定义过渡动画持续的时间。
语法：
E { transition-duration: time; }
time是个数值，单位可是ms或s，默认值是0，所以当需要一个过渡动画时，这个属性必须设置。
transition-timing-function
此属性用来定义过渡动画使用的过渡方式，用三类值：关键字、cubic-bezier()函数和steps()函数。
-
关键字
语法如下：
E { transition-timing-function: keyword; }
可以使用的关键字有：ease, linear, ease-in, ease-out, ease-in-out。
默认值是ease，开始慢，然后加速，最后再次慢下来。
linear，线性的，匀速的。
ease-in，只有在in(开始)的时候慢，然后加速到结束。
ease-out，正好和ease-in相反，只有在out(结束)的时候慢，就是说一开始很快，然后减速到结束。
ease-in-out，在in(开始)和out(结束)的时候慢，中间过程快。
* 简书这里让人不爽，在写这些图片时，并没有换行，所以应该尽可能让图片在一行上可以显示多个，可是最终却是这样子，一张图一行....
-
cubic-bezier()
语法如下：
E { transition-timing-function: cubic-bezier(x1, y1, x2, y2); }
看下图，X和Y轴都是从0到1。并且有四个点:P0, P1, P2, P3。
P0总是在(0,0)处，P1由(x1,y1)来确定，P2由(x2,y2)来确定，P3总是在(1,1)处。
上图的坐标说明：
| Point | Coordinates(x,y) |
|---|---|
| P0 | (0,0) |
| P1 | (0.6,0.1) |
| P2 | (0.15,0.7) |
| P3 | (1.0,1.0) |
之前讨论的关键字都可以通过cubic-bezier()函数来定义：
| Keyword | Cubic Bezier Value |
|---|---|
| ease | 0.25, 0.1, 0.25, 1 |
| linear | 0, 0, 1, 1 |
| ease-in | 0.42, 0, 1, 1 |
| ease-out | 0, 0, 0.58, 1 |
| ease-in-out | 0.42, 0, 0.58, 1 |
cubic-bezier()像transformation中介绍的matrix()一样另人生畏，其实上面的那些关键字已经完全够用了。这里推荐个在线工具http://cubic-bezier.com/，可以可视化的制作cubic-bezier()函数，并且可以和关键字的效果做比较。
-
steps()
语法：
E { transition-timing-function: steps(count, direction); }
count是个整数，代表动画间隔执行的次数。direction有两个关键字：start、end，默认是end，设置动画在每个间隔的执行点。
* 可以把图中的虚线处理解为动画在执行
transition-delay
如其名，动画推迟执行的时间。
E { transition-delay: time; }
与transition-duration一样，time是个数值，单位可以是ms或s，默认值是0，所以transition会立即执行。可以为负数：
E {
transition-duration: 4s;
transition-delay: -2s;
}
当动画被触发时，动画会从中间开始，好像前面的2S已经被执行了似的。
transition shorthand property
h1 {
transition-property: font-size;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-delay: 250ms;
}
可缩写为：
h1 { transition: font-size 2s ease-out 250ms; }
同时执行多个过渡动画
/* 以下两个规则效果是一样的 */
E {
transition-property: border-width, height, padding;
transition-duration: 4s, 500ms, 4s;
}
E { transition: border-width 4s, height 500ms, padding 4s; }
如果出现下面这种情况：
E {
transition-property: border-width, height, padding;
transition-duration: 4s, 500ms;
}
如果一个属性的值少于其他属性，那么循环使用这个属性的值。所以结果是：
transition-property |
transition-duration |
|---|---|
border-width |
4s |
height |
500ms |
padding |
4s |
Animations
Transition(过渡)挺好，但也有其局限性，只有当属性值发生变化时才会产生过渡动画。Animations打破了这个局限，语法上和Transition和很多相似之处。
IE10+支持Animations，基于Webkit的浏览器需要加上厂商前缀-webkit-
keyframes
如其名，关键帧，来定义动画过程中某位置的帧。
简单的动画有两个关键帧就行，在开始和结束处。复杂动画需要更多的帧，但是要在开始和结束帧之间。
@keyframes name{
selector{ property: value; }
}
name定义关键帧的名字，selector定义某个关键帧的位置，其值通过是百分比，还有两个关键字from(0%)和to(100%)。每个关键帧位置会定义一系列CSS规则，当元素的动画执行到当前关键帧时，这个关键帧定义的CSS规则会被用于这个元素(当然这个过程像transition一样，逐渐平稳地过渡)。描述起来怎么这么绕口....
@keyframes expand {
from { border-width: 4px; }
50% { border-width: 12px; }
to {
border-width: 4px;
height: 100%;
width: 100%;
}
}
每个关键帧处的属性值都会继承元素的属性，如果上例中to处的关键帧没有定义border-width属性值，那么其会继承元素本身border-width的值。
animation-name
此属性的值是@keyframes的名字，默认值是none
div { animation-name: expand; }
animation-duration
此属性定义动画的持续时间，类似transition-duration属性。
div { animation-duration: 6s; }
animation-timing-function
类似transition-timing-function属性，该属性的值可以是关键字，cubic-bezier()函数或steps()函数。
div { animation-timing-function: ease-in; }
animation-delay
类似transition-delay，动画延迟执行的时间。
div { animation-delay: 2s; }
animation-iteration-count
不像transition只能够执行一次，动画可以被执行任意次，此属性设置动画执行的次数。
此属性的值要么是一个整数，要么是关键字infinite，默认值是1。
如果值是0或负数，则动画不会被执行。
div { animation-iteration-count: 10; }
animation-direction
此属性有两个值：normal和alternate，默认值是normal。
div { animation-direction: alternate; }
如果动画被执行两次，看下面:
animation-fill-mode
当animation-iteration-count的值不是infinite时，此属性设置元素在动画周期外如何显示。该属性的值可以是：backwards、forwards、both，默认值是none。
backwards，from处的关键帧规则被应用到元素，在动画开始之前。
forwards，to处的关键帧规则被应用到元素，在动画结束之后。
both，from处的关键帧规则被应用到元素，在动画开始之前；to处的关键帧规则被应用到元素，在动画结束之后。
E { animation-fill-mode: both ; }
* 没整明白这个属性有什么用....
animation-play-state
设置动画是否是活动的，可以用来开启或暂停动画。其值可以是：running、paused。
E { animation-play-state: keyword; }
下例，当鼠标在div上时，动画被暂停，直到鼠标离开div，动画继续。
div:hover { animation-play-state: paused; }
animation shorthand
E {
animation: name duration timing-function delay iteration-count direction
fill-mode play-state;
}
/* 以下两个规则是等价的 */
div {
animation-name: expand;
animation-duration: 6s;
animation-timing-function: ease-in;
animation-delay: 2s;
animation-iteration-count: 10;
animation-direction: alternate;
animation-fill-mode: forwards;
animation-play-state: running;
}
div { animation: expand 6s ease-in 2s 10 alternate forwards running; }
animation最简单的写法，只需要两个属性，关键帧的名字和duration。
div { animation: expand 6s; }
一个元素同时执行多个动画
E {
animation-name: first-anim, second-anim;
animation-duration: 6s, 1.25ms;
animation-delay: 0, 750ms;
}
E{ animation: first-anim 6s, second-anim 1.25ms 750ms; }
此文是对《The Book of CSS3 2nd edition》第14章的翻译、理解和记录，方便以后查阅。
感谢其作者Peter Gasston !
