CSS3过渡

过渡

• 概念
  允许CSS属性值在一定的时间区间内平滑地过渡，在鼠标点击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值。
• 兼容性
  IE10+、Firefox16+、Chrome26+、Safari6.1+、Opera12.1+

transition-property属性

• 概念
  检索或设置元素中的参与过渡的属性。
• 属性值

属性值	描述
none	没有属性改变
all	默认值，所有属性改变
property	元素属性名

transition-duration属性

• 概念
  检索或设置对象过渡的持续时间。
• 语法
  transition-duration：time；（默认值是0，单位为毫秒或秒）

transition-timing-function属性

• 概念
  检索或设置对象中过渡的动画类型
• 属性值

属性值	描述
linear	线性过渡，等同于贝塞尔曲线（0.0，0.0，1.0，1.0）
ease	平滑过渡，等同于贝塞尔曲线（0.25，0.1，0.25，1.0）
ease-in	由慢到块，等同于贝塞尔曲线（0.42，0，1.0，1.0）
ease-out	由快到慢，等同于贝塞尔曲线（0，0，0.58，1.0）
ease-in-out	由慢到快再到慢，等同于贝塞斯曲线（0.42，0，0.58，1.0）

transition-delay属性

• 概念
  检索或设置对象延迟过渡的时间。
• 语法
  transition-delay：time；（默认值为0，单位为毫秒或秒）

transition属性缩写

• 语法
  transition：property duration timing-function delay；（顺序不能更改）