CSS 具有transition属性的动画
示例
CSStransition属性可用于简单的动画，它允许基于数字的CSS属性在状态之间进行动画处理。
示例
.Example{
height: 100px;
background: #fff;
}
.Example:hover{
height: 120px;
background: #ff0000;
}查看结果
默认情况下，将鼠标悬停在带有.Example该类的元素上会立即导致该元素的高度跳至120px其背景颜色为红色（#ff0000）。
通过添加transition属性，我们可以使这些更改随时间发生：
.Example{
...
transition: all 400ms ease;
}查看结果
该all值将过渡应用于所有兼容（基于数字）的属性。任何兼容的属性名称（例如height或top）都可以代替此关键字。
400ms指定过渡所花费的时间。在这种情况下，元素的高度变化将需要400毫秒才能完成。
最后，该值ease是动画函数，该函数确定如何播放动画。ease表示开始缓慢，加快速度，然后再次结束缓慢。其他值是linear，ease-out和ease-in。
跨浏览器兼容性
transition除IE9之外，所有主要浏览器通常都很好地支持该属性。对于早期版本的Firefox和基于Webkit的浏览器，请使用供应商前缀，如下所示：
.Example{
transition: all 400ms ease;
-moz-transition: all 400ms ease;
-webkit-transition: all 400ms ease;
}注意：该transition属性可以为任意两个数值之间的变化设置动画，而与单位无关。它也可以单元，例如间过渡100px到50vh。但是，它不能在数字和默认值或自动值之间转换，例如将元素的高度从转换100px为auto。