1.transition（过渡）
在CSS 3引入Transition（过渡）这个概念之前，CSS是没有时间轴的。也就是说，所有的状态变化，都是即时完成。
CSS transitions 可以决定哪些属性发生动画效果 (明确地列出这些属性)，何时开始 (设置 delay），持续多久 (设置 duration) 以及如何动画 (定义timing function，比如匀速地或先快后慢)。可动画属性列表 是一个有限集合。
1.1语法
transition: <property> <duration> <timing-function> <delay>;| 值 | 描述 |
|---|---|
| transition-property | 规定设置过渡效果的 CSS 属性的名称 |
| transition-duration | 规定完成过渡效果需要多少秒或毫秒 |
| transition-timing-function | 规定速度效果的速度曲线 |
| transition-delay | 定义过渡效果何时开始 |
transition-timing-function：
前五个值其实都是 cubic-bezier(n,n,n,n) 的特例。它们被称为贝塞尔曲线
1.2transition的使用注意
- 目前，各大浏览器（包括IE 10）都已经支持无前缀的transition，所以transition已经可以很安全地不加浏览器前缀。
- 不是所有的CSS属性都支持transition，完整的列表查看这里。
- transition需要明确知道，开始状态和结束状态的具体数值，才能计算出中间状态。比如，height从0px变化到100px，transition可以算出中间状态。但是，transition没法算出0px到auto的中间状态，也就是说，如果开始或结束的设置是height: auto，那么就不会产生动画效果。类似的情况还有，display: none到block，background: url(foo.jpg)到url(bar.jpg)等等。
1.3transition的局限
transition的优点在于简单易用，但是它有几个很大的局限。
- transition需要事件触发，所以没法在网页加载时自动发生。
- transition是一次性的，不能重复发生，除非一再触发。
- transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
- 一条transition规则，只能定义一个属性的变化，不能涉及多个属性，可以用，分隔设置多个规则，例如： transition: 1s height, 1s width;。
1.4检查过渡是否完成
当过渡完成时触发一个事件，在符合标准的浏览器下，这个事件是 transitionend, 在 WebKit 下是 webkitTransitionEnd. 详情查看页面底部的兼容性表格。 transitionend 事件提供两个属性:
照例可以用 element.addEventListener() 方法来监听这个事件：
el.addEventListener("transitionend", updateTransition, true);2.animation（动画）
animations 使得可以将从一个CSS样式配置转换到另一个CSS样式配置。动画包括两个部分:描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧(@keyframes)。
2.1语法
（8个属性的简写）
animation: <name> <duration> <timing-function> <delay> <iteration-count>
<direction> <play-state> <fill-mode>;| 值 | 描述 |
|---|---|
| name | 用来调用@keyframes定义好的动画，与@keyframes定义的动画名称一致 |
| duration | 指定元素播放动画所持续的时间，默认值为0s，表示无动画 |
| timing-function |
对于关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。 |
| delay | 定义在浏览器开始执行动画之前等待的时间，值整个animation执行之前等待的时间，默认为0；可以是负数，表明动画已经开始多久 |
| iteration-count | 定义动画的播放次数infinite：无限循环播放动画.<number>：动画播放的次数；默认值为1。可以用小数定义循环，来播放动画周期的一部分：例如，0.5 将播放到动画周期的一半。不可为负值。0为动画不发生 |
| direction | 设置动画播放方向：（见下图） normal(按时间轴顺序) reverse(时间轴反方向运行) alternate(轮流，即来回往复进行) alternate-reverse(动画先反运行再正方向运行，并持续交替运行) |
| play-state | 定义一个动画是否运行或者暂停。可以通过查询它来确定动画是否正在运行。另外，它的值可以被设置为暂停和恢复的动画的重放。恢复一个已暂停的动画，将从它开始暂停的时候，而不是从动画序列的起点开始在动画。 running：当前动画正在运行。paused：当前动画以被停止。 |
| fill-mode | 设置CSS动画在执行之前和之后如何将样式应用于其目标。 none：默认值，回到动画没开始时的状态。forwards表示让动画停留在结束状态。backwards：让动画回到第一帧的状态，并在 |
2.2使用keyframes定义动画序列
用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。
例如：
@keyframes rainbow {
0% { background: #c00 }
50% { background: orange }
100% { background: yellowgreen }
}
相当于
@keyframes rainbow {
from { background: #c00 }
50% { background: orange }
to { background: yellowgreen }
}
2.3animation的优点
相较于传统的脚本实现动画技术，使用CSS动画有三个主要优点：
- 能够非常容易地创建简单动画，你甚至不需要了解JavaScript就能创建动画。
- 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用JavaScript实现的动画通常表现不佳（除非经过很好的设计）。
- 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。
3.timing-function
两种实现方式：steps()和cubic-bezier()
只不过steps()更像是楼梯坡道，cubic-bezier()更像是无障碍坡道
然后steps()简化出了step-start和step-end这两个关键字；
cubic-bezier()则有linear，ease，ease-in，ease-out以及ease-in-out
3.1 steps
steps(number, position)
number：数值。这个很好理解，表示把我们的动画分成了多少段。position：关键字。表示动画是从时间段的开头连续还是末尾连续。支持start和end两个关键字，含义分别如下：start：表示直接开始。end：表示戛然而止。是默认值。
一切都是反的！start不是开始，而是结束；end不是结束，而是开始
step-start等同于steps(1, start)，step-end等同于steps(1, end)或者steps(1)
4.transform属性
应用于元素的2D或3D转换，允许将元素旋转、缩放、移动和倾斜
- 旋转
transform:rotate（x deg） x属于（-360deg,360deg） - 缩放
transform:scale(x,y) transform:scaleX(x) = transform:scale(x,1) transform:scaleY(y) = transform:scale(1,y) 缩放中心点为元素中心点 x,y>1放大 x,y<1缩小 - 移动
transform:translate(x,y) transform:translateX(x) transform:translateY(y) x,y像素或者% - 倾斜
transform:skew(x,y) transform:skewX transform:skewY x属于（-360deg,360deg）
参考：
阮一峰：www.ruanyifeng.com/blog/2014/0…
MDN：developer.mozilla.org/zh-CN/docs/…
张鑫旭：www.zhangxinxu.com/wordpress/2…
