animation-timing-function
介绍
animation-timing-function属性定义 CSS 动画在每一动画周期中执行的节奏。可能值为一或多个timing-functionopen in new window。
标准化语法
//默认值linear
animation-name: linear | ease | ease-in | ease-out | ease-in-out | <timing-function>;
1
2
2
样例：
/* 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;
/* Function values */
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 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.1);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
与 Web 的区别
注意
step函数仅在Android上支持，iOS暂未支持animation仅支持对transform, background-color, opacity做动画
扩展阅读
- animation
- animation-name
- animation-duration
- animation-timing-function
- animation-delay
- animation-iteration-count
- animation-direction
- animation-fill-mode
- animation-play-state
注意事项
- 如果是动态设置的动画属性，需要在节点标记
flatten="false"属性 - 如果 iOS 显示效果不符合预期，在节点标记
implicit-animation="false"属性