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;
- 其他值没有顺序要求。