CSS3动画（animation）属性有如下几个:
| 属性 | 值 | 说明 |
| animation-name | name | 指定元素要使用的keyframes名称 |
| animation-duration | time（ms、s） | 指定动画时长 |
| animation-timing-function | linear、ease（默认）、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n) | 设置动画将如何完成一个周期 |
| animation-delay | time（ms、s） | 设置动画启动前的延迟间隔（只会执行一次） |
| animation-iteration-count | 1（默认）、n、infinite | 定义动画播放次数 |
| animation-direction | normal（默认）、reverse、alternate、alternate-reverse | 指定是否轮流反向播放动画 |
| animation-fill-mode | none（默认）、forwards、backwards、both | 规定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 |
| animation-play-state | running、paused |
指定动画运行或者暂停 |
本片博文主要记录一下 animation-timing-function 的各个值的动态效果，方便日后查阅。
1. linear：动画从头到尾的速度是相同的，匀速变化
2. ease：慢 -> 快 -> 慢
3. ease-in：慢 -> 匀速
4. ease-out：匀速 -> 慢
5. ease-in-out： 慢 -> 匀速 -> 慢
以上5个动画运行效果的总结只是基于视觉上的阐述，详细请参阅 详细说明
6. cubic-bezier(0.68, -0.55, 0.27, 1.55)：4个参数自己设定
贝塞尔函数常用来制作有反弹效果的动画，参数相关 查看详细
原文地址：https://www.cnblogs.com/Kuro-P/p/8463890.html
时间： 2024-11-08 20:48:27