transition

计算机图形学

贝塞尔曲线

https://easings.net/

常用曲线收集

• 侧边栏收起

transition all 0.6s cubic-bezier(0.25, 1, 0.5, 1)

使用方式

基础语法：

transition: 过渡属性 过渡时间 过渡曲线 延时开始

.ccvb {
  transition: top .4s cubic-bezier(.49, -.3, .68, 1.23), // 给top 添加过度效果
    width .4s cubic-bezier(.49, -.3, .68, 1.23);         // 给width 添加过度效果
}

常用的过渡曲线：

常用动画曲线
    平滑过度   - cubic-bezier(.49, -.3, .68, 1.23)
    OUT and IN - cubic-bezier(0.68, -0.55, 0.27, 1.55)

指定某个属性：

transition: margin-right 2s;

指定多个属性，用,分割

transition: margin-right 2s, width .5s;

transition: height 1s linear, transform 0.5s ease-in, color 2s ease-in-out;