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

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

注意：上述6个方法均是在一个关键帧的前提下完成的，即

@keyframes move{
    from { margin: 0}
    to { margin: calc(100% - 4em); }  
}

当关键帧不唯一时，每个关键帧之间将应用整个动画设置的缓动函数，因为 animation-timing-function的定义就是 "关键帧之间的缓动函数"

@keyframes move{
    from { margin-left: 0; }
    50% { margin-left: calc(50% - 2em); }
    to { margin-left: calc(100% - 4em); }
}

如图所示，animation-timing-function 是 应用在每个关键帧之间的，所以不同关键帧可以设置不同的缓动动画

@keyframes move{
    from { margin-left: 0; animation-timing-function:linear; }
    50% { margin-left: calc(50% - 2em); animation-timing-function:ease-out;}
    to { margin-left: calc(100% - 4em); } /*最后一个关键帧设置无效，因为此关键帧为最后一帧*/
}

 参考：动画：从AE到web