CSS3 Pushing the Limits - Bring 2D Transforms to Life with Transitions

Transitions 和后面说的 Animation是不同
Transitions 主要是 一个元素从一个状态到另一个状态变化，过程是过渡的

例子：

a {
transition: .5s;
}
a:hover {
opacity: .5;
}

##Controlling Your Transitions

transition-property: 哪个属性变化的时候才有过渡效果

    a {
background-color: yellow;
color: black;
transition-property: background-color;
/* Other transition properties */
}
a:hover {
background-color: blue;
color: white;
}

上面的例子是没作用的，因为没有duration
transition-property 可以为 all （默认值）

transition-duration：过渡过程是时间

transition-timing-function： 这个属性比上面俩稍微复杂点，及时表示过程中加速减速的方法

- linear 匀速
- ease 默认值 逐渐变慢
- ease-in：(加速)
- ease-out：（减速）
- ease-in-out：（加速然后减速）
- cubic-bezier：（该值允许你去自定义一个时间曲线）

transition-delay： 延迟时间，就是属性变化后多久才开始过渡效果

简写：

transition: opacity .5s linear 2s;
transition: linear .5s opacity 2s;
transition: linear opacity .5s 2s;
transition: .5s 2s opacity linear;

唯一要注意的是 duration 要在delay前面，其他属性位置随意

duration是唯一的必填项

当前状态下，在xx属性变化的时候 在xx秒内完成xxx速率变化的过度，延迟xx秒开始

div div:first-child {
			background: blue;
			width: 300px;
			height: 300px;
			-webkit-transition: .4s;
		}

		div div:hover {
			background: red;
			-webkit-transform: rotate(360deg);
			-webkit-transition: background 1s;
		}

解释下，第一次看的话可能和结果有些不同

hover状态的时候：只有当background变化才出发过度，这里颜色变了，所以 hover的时候颜色是1s过渡效果。但rotate是瞬间变
离开的时候：没属性指定，所以都要过渡，颜色0.4s过渡 rotate也要0.4秒过渡

---

cubic-bezier() 有点不好解释，直接用工具吧，很多好动画都靠这个了

http://cubic-bezier.com/

---

Stepping Functions

div {
width: 300px;
height: 300px;
transition: 5s steps(5, start);
}
div:hover {
transform: translate(500px, 0);
}

分5步，相当于 1s 100px移动。不显示中间过渡效果，只显示 100 200 跳跃的点

语法不难，但综合使用很重要