CSS3动画中的animation-timing-function效果演示

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个参数自己设定

　　贝塞尔函数常用来制作有反弹效果的动画，参数相关 查看详细