animation-timing-function与三次贝塞尔曲线(cubic-bezier)

Posted 2023-05-02

参考技术A animation-timing-function 和 transition-timing-function控制动画速度提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，都是基于cubic-bezier来自定义速度。
CSS3动画速度的控制通过三次贝塞尔曲线函数实现，定义规则为

......

其实第一个linear可以换成坐标（0.5,0.5,0.5,0.5），总之很多值都可以替换。

animation小方法

animation 属性值

animation-name: ani    //动画名称

animation-duration :2s     //动画完成一个周期所完成的时间

animation-timing-function: ease   //动画的速度曲线

animation-delay: 2s    //动画何时开始

animation-iteration-count: 1/infinite    //动画被播放的次数

animation-direction: alternate/normal     //动画是否在下一周期逆向地播放

animation-play-state:running/paused      //动画是否正在运行或暂停

anination-fill-mode:forwards/backwards/both  //动画之外的状态

@keyframes  ani{

　　from{ }

　　to{ }

}

@keyframes ani{

　　0%{ }

　　25%{ }

　　50%{ }

　　75%{ }

　　100%{ }

}