使用过渡和动画，可以让 css 属性变化更加丝滑

过渡和动画

过渡和动画无法对所有的 CSS 属性产生影响，能够产生影响的只有数值类属性，例如：颜色、宽高、字体大小等等

过渡

MDN 详细文档

1

transition: 过渡属性 持续时间 过渡函数 过渡延迟;

• 过渡属性

  针对哪个 css 属性应用过渡。例如填写transform，则表示仅针对transform属性应用过渡。

  若填写all或不填写，则表示针对所有 css 属性都应用过渡

• 持续时间

  css 属性变化所持续的时间，需要带上单位。例如3s表示 3 秒，0.5s或500ms均表示 500 毫秒

• 过渡函数

  本质是 css 属性变化的贝塞尔曲线函数，通常直接使用预设值：

  ease-in-out：平滑开始，平滑结束

  linear：线性变化

  ease-in：仅平滑开始

  ease-out：仅平滑结束

• 过渡延迟

  书写规则和持续时间一样，表示过渡效果延迟多久后触发，不填则无延迟

在 JS 中，可以监听元素的transitionstart和transitionend事件，从而在过渡开始和过渡结束时做一些别的事情

动画

MDN 详细文档 > 动画的本质是预先定义的一套 css 变化规则，然后给该规则取个名字

然后，其他元素即可使用这样的规则：

1

animation: 规则名 持续时间;

在应用规则时，还可以指定更多的信息

1

animation: 规则名 持续时间 重复次数 时间函数 动画方向 延迟时间;

一些细节：

• 定义规则时，0%可以书写为from
• 定义规则时，100%可以书写为to
• 重复次数为infinite时，表示无限重复
• 动画方向为alternate时，表示交替反向，第 1 次正向，第 2 次反向，第 3 次正向，第 4 次方向，以此类推

在 JS 中，可以监听元素的animationstart和animationnend事件，从而在过渡开始和过渡结束时做一些别的事情