2.6 CSS 元素过渡

1、CSS 过渡

过渡可以在不使用 Flash 动画，不使用JavaScript的情况下，让元素从一种样式，平滑过渡为另一种样式。

• transition-property

• • 属性值：

• • • none :不过渡任何属性。
    • all :过渡所有能过渡的属性。
    • 具体某个属性名，例如:width . heigth，若有多个以逗号分隔。

• • 作用:定义哪个属性需要过渡，只有在该属性中定义的属性（比如宽、高、颜色等）才会以有过渡效果。
  • 不是所有的属性都能过渡，值为数字，或者值能转为数字的属性，都支持过渡，否则不支持过渡。常见的支持过渡的属性有:颜色、长度值、百分比、z-index、 opacity、2D 变换属性、3D变换属性、阴影。

• transition-duration

• • 属性值：

• • • 0∶没有任何过渡时间――默认值。
    • s或ms∶秒或毫秒。
    • 列表:

• • • • 如果想让所有属性都持续—个时间，那就写一个值。
      • 如果想让每个属性持续不同的时间那就写一个时间的列表。

• • 作用：设置过渡的持续时间，即:一个状态过渡到另外一个状态耗时多久。

• transition-delay：指定开始过渡的延迟时间,单位:s 或 ms
• transition-timing-function：设置过渡的类型

• • ease :平滑过渡(默认值)
  • linear :线性过渡
  • ease-in:慢→快
  • ease-out :快→慢
  • ease-in-out :慢→快→慢
  • step-start :等同于steps(1,start)
  • step-end :等同于steps(1, end)
  • steps( integer, ?):接受两个参数的步进函数。

• • • 第一个参数必须为正整数，指定函数的步数。
    • 第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数默认值为end。

• • cubic-bezie ( number, number, number, number):特定的贝塞尔曲线类型。

• • • 在线制作贝赛尔曲线: cubic-bezier.com

• transition : 1s 1s linear all ;

• • 如果设置了一个时间，表示duration;如果设置了两个时间，第一是duration，第二个是delay;
  • 其他值没有顺序要求。