CSS3 - 过渡动画

过渡（transition） 是 CSS3 中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，使元素从一个状态渐渐的过渡到另外一个状态时为元素添加效果。

语法格式：

transition：要过渡的属性 花费时间 运动曲线 何时开始;
如果有多组属性变化, 用逗号隔开。

属性	描述	CSS
transition	简写属性，用于在一个属性中设置四个过渡属性。	3
transition-property	规定应用过渡的 CSS 属性的名称。	3
transition-duration	定义过渡效果花费的时间。默认是 0。	3
transition-timing-function	规定过渡效果的时间曲线。默认是 "ease"。	3
transition-delay	规定过渡效果何时开始。默认是 0。	3

transition-property：如果想要所有的属性都变化过渡， 写一个all 就可以

transition-duration：花费时间单位是秒 s，比如 0.5s，这个s单位必须写，ms 毫秒

transition-timing-function：运动曲线，默认是 ease

transition-delay：何时开始，默认是 0s，立马开始

运动曲线示意图：

运动曲线示意图

案例一：

示例代码如下：

效果图如下：

效果图

案例二：

模仿京东右侧边栏效果

示例代码如下：

效果图如下：

效果图