主题
  • 默认模式
  • 浅蓝色模式
  • 淡绿色模式
  • 深夜模式

定义和用法

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- 的数字表示使用前缀的首个版本。

Chrome 浏览器 EDGE 浏览器 Firefox 浏览器 Safari 浏览器 Opera 浏览器
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
发表评论