1.transion: 只对块级元素生效
2.transition:transition-property, transition-duration, transition-timing-function, 和
transition-delay
3.在transition属性中，各个值的书写顺序是很重要的：第一个可以解析为时间的值会被赋值给
transition-duration，第二个可以解析为时间的值会被赋值给transition-delay。
4.transition的完整写法如下
img{
transition: 1s 1s height ease;
}
img{
transition-property: height;
transition-duration: 1s;
transition-delay: 1s;
transition-timing-function: ease;
}
5.transition的局限
transition的优点在于简单易用，但是它有几个很大的局限。
（1）transition需要事件触发，所以没法在网页加载时自动发生。
（2）transition是一次性的，不能重复发生，除非一再触发。
（3）transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
（4）一条transition规则，只能定义一个属性的变化，不能涉及多个属性。
CSS Animation
div:hover {
animation: 1s rainbow;
}
默认情况下，动画只播放一次。加入infinite关键字，可以让动画无限次播放。
div:hover {
animation: 1s rainbow infinite;
}
div:hover {
animation: 1s rainbow forwards;
}
forwards表示让动画停留在结束状态
animation-fill-mode还可以使用下列值。
（1）none：默认值，回到动画没开始时的状态。
（2）backwards：让动画回到第一帧的状态。
（3）both: 根据animation-direction（见后）轮流应用forwards和backwards规则。
动画循环播放时，每次都是从结束状态跳回到起始状态，再开始播放。animation-direction属性
，可以改变这种行为。
@keyframes rainbow {
0% { background-color: yellow; }
100% { background: blue; }
}
默认情况是，animation-direction等于normal。
div hover {
animation: 1s rainbow 3 normal;
}
此外，还可以等于取alternate、reverse、alternate-reverse等值。它们的含义见下图（假定动
画连续播放三次）。
animation的各项属性
div:hover {
animation: 1s 1s rainbow linear 3 forwards normal;
}
div:hover {
animation-name: rainbow;
animation-duration: 1s;
animation-timing-function: linear;
animation-delay: 1s;
animation-fill-mode:forwards;
animation-direction: normal;
animation-iteration-count: 3;
}
如果想让动画保持突然终止时的状态，就要使用animation-play-state属性
div {
animation: spin 1s linear infinite;
animation-play-state: paused;
}
div:hover {
animation-play-state: running;
}
目前，IE 10和Firefox（>= 16）支持没有前缀的animation，而chrome不支持，所以必须使用webkit
前缀。
也就是说，实际运用中，代码必须写成下面的样子。
div:hover {
-webkit-animation: 1s rainbow;
animation: 1s rainbow;
}
@-webkit-keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}
@keyframes rainbow {
0% { background: #c00; }
50% { background: orange; }
100% { background: yellowgreen; }
}