如何使用CSS放慢过渡动画速度？

要控制CSS过渡动画的速度，你需要用**transition-timing-function**属性，它定义了过渡过程中速度的变化曲线。同时也可以在transition简写属性里直接指定这一参数。

常用取值： #

• linear：匀速过渡，整个过程速度保持不变
• ease：默认值，开始慢，中间快，结束慢
• ease-in：开始慢，之后加速
• ease-out：开始快，之后减速
• ease-in-out：开始和结束都慢，中间加速
• cubic-bezier(n,n,n,n)：自定义贝塞尔曲线，精准控制速度变化

结合你的代码修改示例： #

给目标元素添加过渡属性，同时指定速度曲线：

#test2{
  width: 300px;
  height: 300px;
  background: red;
  /* 简写方式：指定过渡属性、时长、速度曲线 */
  transition: width 0.3s ease-in-out, background 0.3s linear;
}

#test2:hover{
  width: 400px;
  background: blue;
}

或者拆分写法：

#test2{
  width: 300px;
  height: 300px;
  background: red;
  transition-property: width, background;
  transition-duration: 0.3s;
  /* 指定速度曲线 */
  transition-timing-function: ease-in-out;
}

#test2:hover{
  width: 400px;
  background: blue;
}

注意：transition-duration是必须的，没有时长的话过渡不会生效，transition-timing-function是在这个时长内控制速度变化的规则。

内容的提问来源于stack exchange，提问作者Ethan Holdston