过渡(CSS3)
过渡（transition)是CSS3中具有颠覆性的特征之一，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果。
过渡动画： 是从一个状态 渐渐的过渡到另外一个状态
帧动画：通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片
在CSS3里使用transition可以实现补间动画（过渡效果），并且当前元素只要有“属性”发生变化时即存在两种状态(我们用A和B代指），就可以实现平滑的过渡，为了方便演示采用hover切换两种状态，但是并不仅仅局限于hover状态来实现过渡。
语法格式:
transition: 要过渡的属性 花费时间 运动曲线 何时开始; 如果有多组属性变化，还是用逗号隔开。
如果想要所有的属性都变化过渡， 写一个all 就可以
transition-duration 花费时间 单位是 秒 s 比如 0.5s 这个s单位必须写 ms 毫秒
运动曲线 默认是 ease
何时开始 默认是 0s 立马开始
运动曲线示意图：
div { width: 200px; height: 100px; background-color: pink; /* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */ transition: width 0.6s ease 0s, height 0.3s ease-in 1s; /* transtion 过渡的意思 这句话写到div里面而不是 hover里面 */ } div:hover { /* 鼠标经过盒子，我们的宽度变为400 */ width: 600px; height: 300px } transition: all 0.6s; /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡</title> <style> div { width: 100px; height: 100px; background-color: pink; transition: all .3s; /* 过渡写再本身是 谁做动画写再谁身上 s ms*/ } div:hover { /*background: green no-repeat url();*/ background: green ; /*transform: translate(100px, 100px); 只有 x y 默认为0 transform: scale(1.3); 只有 x y 默认 等比例缩放 */ transform: translate(100px, 100px) scale(0.3) rotate(45deg); /*顺序有关系 先 移动后缩放*/ } </style> </head> <body> <div> </div> </body> </html>
