Skip to main content

过渡

基本概念​

过渡的作用就是让指定的 css 属性，当其取值发生改变时，可以让其取值从 原值 到 目标值 进行 平滑地过渡。

其语法如下：

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

transition-property​

transition-property: all | none | [css-property]*

该属于用于指定当前元素中哪些 css 属性具有过渡效果，默认值为 all，表示当前元素的所有 css 属性都具有过渡效果。你也可以给它取值为 none 表示该元素所有属性都不开启过渡效果。

当然也可以指定几个特定的 css 属性具有过渡效果：

transition-property: border, color, background;

注意用逗号进行分隔。

需要注意的是，对于一些简写属性，比如 background、border，对这些属性设置过渡效果，相当于给它所有的单一属性设置过渡效果。

transition-proerty: border;

/* equal */
transition-property: border-width, border-color, border-style ...
transition-property: background;

/* equal */
transition-property: background-color, background-position ...

transition-duration​

transition-duration: <time>;

该属性以秒或毫秒为单位指定过渡动画所需的时间，默认值为 0 ，表示不出现过渡动画。

该属性可以取一值和多值：

transition-property: border, color, background; 
transition-duration: 0.5s;

表示 border、color 和 background 属性的过渡动画持续时间均为 0.5s。

transition-property: border, color, background; 
transition-duration: 0.5s, 0.2, 0.3;

取多值时，依次对应 transition-proerty 指定的属性的过渡动画持续时间。

transition-timing-function​

transition-timing-function: <easing-function>

该属性用于设置 css 属性取值过渡过程中的 加速曲线，其常见取值如下：

  • ease 过渡的速度是 慢-快-慢，是默认值
  • ease-in 过渡的速度是 慢-快
  • ease-out 过渡的速度是 快-慢
  • ease-in-out 过渡的速度是 慢-快-慢
  • linear 过渡的速度是 匀速
  • cubic-bezier()，贝塞尔曲线函数，可以设置为任意加速曲线
  • steps()，用于设置不连续的加速曲线

关于 ease 和 ease-in-out 的区别可以参考下图，曲线的斜率表示速度：

pic.nm

有关加速曲线详情参考 MDN —— easing-function。

另外，该属性也可以取多个值，原理和 transition-duration 一样，按顺序依次对应 transition-property，需要由逗号分隔。

transition-property: border, color, background; 
transition-timing-funciton: ease ease-in ease-out;

transition-delay​

transition-delay: <time>;

该属性用于规定过渡效果开始前的等待时间，默认值为 0s。

transition​

transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];

该属性为上面四个属性的简写，一般情况下对于元素过渡效果的处理都是使用简写形式，下面来看几个例子。

/* property | duration | timing-function */
transition: width .5s ease-in;

/* [property | duration | timing-function | delay], [property | duration | timing-function] */
transiton: height .2s linear .3s, border .1s ease-out; /* 可以单独设置多组属性 */