
定义和用法
animation-timing-function
是 CSS 中用于控制动画速度曲线的属性,它决定了动画在每一周期中如何从开始过渡到结束。
animation-timing-function
所定义的速度曲线,能够让动画变化过程更为平滑自然。
默认值: | ease |
继承性: | no |
版本: | CSS3 |
JavaScript 语法: | object.style.animationTimingFunction="linear" |
常用的实例
接下来通过多个实例演示animation-timing-function
属性的用法,来深化您对animation-timing-function
属性的理解。
1. 预定义关键词
使用预定义的关键词,控制动画速度曲线。
.element {
animation-timing-function: ease; /* 默认值,慢-快-慢 */
animation-timing-function: linear; /* 匀速运动 */
animation-timing-function: ease-in; /* 慢-快 */
animation-timing-function: ease-out; /* 快-慢 */
animation-timing-function: ease-in-out; /* 慢-快-慢 */
animation-timing-function: step-end; /* 等同于steps(1, end) */
animation-timing-function: step-start; /* 等同于steps(1, start) */
}
2. 三次贝塞尔曲线函数
使用cubic-bezier(n,n,n,n)
自定义速度曲线,参数范围是 0-1。
.element {
/* 自定义贝塞尔曲线 */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* 预定义关键词的实际贝塞尔值 */
animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1); /* ease */
animation-timing-function: cubic-bezier(0.42, 0, 1.0, 1); /* ease-in */
animation-timing-function: cubic-bezier(0, 0, 0.58, 1); /* ease-out */
animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); /* ease-in-out */
}
3. 步进函数
使用steps(n,start|end)
定义动画分多少步完成。
.element {
/* 分步动画 */
animation-timing-function: steps(5, jump-start); /* 现代语法 */
animation-timing-function: steps(5, jump-end);
animation-timing-function: steps(5, jump-none);
animation-timing-function: steps(5, jump-both);
/* 传统语法 */
animation-timing-function: steps(5, start); /* 等同于jump-start */
animation-timing-function: steps(5, end); /* 等同于jump-end */
}
CSS 语法
animation-timing-function: value;
属性值
值 | 描述 |
---|---|
ease |
(默认值) - 动画开始缓慢,然后加速,最后减速 |
linear |
动画匀速进行 |
ease-in |
动画缓慢开始,然后加速 |
ease-out |
动画快速开始,然后减速 |
ease-in-out |
动画缓慢开始和结束,中间加速 |
step-start |
动画直接跳到结束状态 |
step-end |
动画保持开始状态直到结束 |
cubic-bezier(n,n,n,n) |
使用cubic-bezier(n,n,n,n) 自定义速度曲线,参数范围是 0-1。 |
steps(n,start|end) |
使用steps(n, start|end) 定义动画分多少步完成。 |
浏览器支持
下表中数字注明了完全支持animation-timing-function
属性的首个浏览器版本。
带 -webkit-、-moz- 或 -o- 的数字表示使用前缀的首个版本。
![]() |
![]() |
![]() |
![]() |
![]() |
43.0 4.0 -webkit- |
10.0 | 16.0 5.0 -moz- |
9.0 4.0 -webkit- |
30.0 15.0 -webkit- 12.0 -o- |
评论区 0
发表评论
教程介绍
CSS 参考手册全面涵盖选择器、盒模型,文本属性等,助您快速检索 CSS 使用方法。
32
章节
14
阅读
0
评论
反馈提交成功
感谢您的反馈,我们将尽快处理您的反馈