transition-timing-function - 缓动函数

语法说明

transition-timing-function: keyword | cubic-bezier();

• ease - 默认值，慢速开始，加速，然后慢速结束
• linear - 匀速运动
• ease-in - 慢速开始，然后加速
• ease-out - 快速开始，然后减速
• ease-in-out - 慢速开始和结束
• cubic-bezier() - 自定义贝塞尔曲线

对比演示

点击"全部播放"按钮，观察不同缓动函数的效果差异

代码示例

/* 匀速运动 */
.linear {
  transition-timing-function: linear;
}

/* 默认缓动 */
.ease {
  transition-timing-function: ease;
}

/* 慢速开始 */
.ease-in {
  transition-timing-function: ease-in;
}

/* 慢速结束 */
.ease-out {
  transition-timing-function: ease-out;
}

/* 慢速开始和结束 */
.ease-in-out {
  transition-timing-function: ease-in-out;
}