动画定时功能属性 | animation-timing-function
CSSanimation-timing-function属性定义CSS动画在每一动画周期中执行的节奏。可能值为一或多个<timing-function>。
/* Keyword values */
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps(4, end);
animation-timing-function: frames(10);
/* Multiple animations */
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
/* Global values */
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;使用速记属性animation一次性设置所有动画属性通常很方便。
Initial value | ease |
|---|---|
Applies to | all elements, ::before and ::after pseudo-elements |
Inherited | no |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | the unique non-ambiguous order defined by the formal grammar |
语法
对于一个关键帧动画来说，timing function作用于一个关键帧周期而非整个动画周期，即从关键帧开始开始，到关键帧结束结束。
定义于一个关键帧区块的缓动函数(animation timing function)应用到改关键帧；另外，若该关键帧没有定义缓动函数，则使用定义于整个动画的缓动函数。
值
通常用animation-property简写定义整个动画属性更为方便。
注意：当您在一个animation-*属性上指定了多个以逗号分隔的值时，它们将以animation-name不同的方式分配给属性中指定的动画，具体取决于有多少个值。有关更多信息，请参阅设置多个动画属性值。
正式语法
<single-timing-function>#where
<single-timing-function> = linear | <cubic-bezier-timing-function> | <step-timing-function> | <frames-timing-function>
where
<cubic-bezier-timing-function> = ease | ease-in | ease-out | ease-in-out | cubic-bezier(<number>, <number>, <number>, <number>)
<step-timing-function> = step-start | step-end | steps(<integer>[, [ start | end ] ]?)
<frames-timing-function> = frames(<integer>)示例
有关示例，请参阅CSS动画。
规范
Specification | Status | Comment |
|---|---|---|
CSS AnimationsThe definition of 'animation-timing-function' in that specification. | Working Draft | Initial definition. |
浏览器兼容性
Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
Basic support | (Yes)-webkit 43.0 | (Yes)-webkit (Yes) | 5.0 (5.0)-moz 16.0 (16.0)1 | 10 | 12 -o 12.10 | 4.0-webkit |
frames() | No support2 | ? | No support2 | No support | No support2 | ? |
Feature | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile | Chrome for Android |
|---|---|---|---|---|---|---|---|
Basic support | (Yes)-webkit | (Yes)-webkit (Yes) | 5.0 (5.0)-moz 16.0 (16.0)1 | ? | 12-o | (Yes)-webkit | ? |
frames() | ? | ? | No support2 | No support | (Yes) | ? | (Yes) |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
