详解CSS动画属性关键帧keyframes全解析

大概有多久没有更新专栏文章了。半年?下半年忙到起飞,或者毫不夸张的说是发射?仅有的一点个人时间,上半年贡献给了Python,现在差不多已忘掉了七七八八(一首《凉凉》送给自己),下半年贡献给了JavaScript,终于鼓起勇气系统的开始学习JS了(换台,梁静茹《勇气》走起)。本来想一直等等等,等到webapi学完后放个大招,svg+CSS动画搭乘上JavaScript简直如虎添翼长驱直入。但是,看掘金作者群里讨论的风生水起,突然感觉自己全然是陌生人(此处应放蔡健雅?),所以,更一篇文章刷一下存在感。

这篇文章本来是写的《SVG+CSS动画》小册中的一个小节选,小册因为各种莫名的原因,搁浅了,搁浅……起航时间遥遥无期,但keyframes关键帧作为控制动画在不同时间的状态的重要元素,决定了七十二变的终极形态,所以这次更新专栏拿它下手。至于小册嘛,如果能发的话,里面再换成其他的案例就好,此为后话。

关键帧keyframes的基础概念此处可省略,下面才是满满的干货。

案例:一路向前永不停歇的圆

因为只是来解释关键帧,所以只搞了一个简易的仅水平位移的动效。因此,这篇文章得以脱离SVG单独存在仅和CSS3动画属性相关。

这是一个努力从起点滚向终点的圆圈,整个路程为800px,但我在它的必经之路的三处设置了三个驿站。现在就要通过关键帧的定义让圆圈在行进的路上进入驿站并稍作停顿。

1.先来一个最基础的

CSS部分定义一个最基础的位移动画,4s完成,线性速度case-关键帧演示1-基础 。

@keyframes  move{
0%{transform:translateX(0)}
100%{transform:translateX(800px)}
}
.c_move{animation:move 4s linear both} /*both:运动结束后停留在终点*/

这个发挥作用主要是在定义了无限循环动画时。

让圆圈在起点停留2s那是表象说法,转化成我们的动画定义语言,就是在4s动画周期内前2s是没有动画效果的。所以,动画规则我来这样定义:

@keyframes  move{
0%{transform:translateX(0)}
50%{transform:translateX(0px)}
100%{transform:translateX(800px)}
}

对照上面时间轴的分割来看,更容易理解一些,这样就得到了在起点处停留2s后,在后面的2s完成整个动画的动效。这里亦或用一种更简单的写法为 0%, 50%{transform:translateX(0)} ,属性相同的可以合并在一起,用逗号分隔。 case-关键帧演示-延迟开始

对应关键帧的定义如下:

@keyframes  move{
0%{transform:translateX(0)}
25%,100%{transform:translateX(800px)}
}

最终结果圆圈一定是4倍速度全力以赴加速完成旅程(毕竟要把原来4s的时间压缩到1s完成),然后怡然自得的在终点等待整个动画时间结束。 case-关键帧演示-提前结束

这里,出现了一些看上去很奇怪的数字,需要解释一下。先来明确一点,我们分析时间轴,最终要获得是时间节点。针对我们的设计,停留1s,那运动的时间就是3s,而这3s的时间是分成两部分的,第一部分是前200px,第二部分是后600px,因为是线性匀速,所以当时间轴分成A+B+C三部分后,在A时间段跑完200px,在C时间段跑完600px,计算出A对应的时间0.75s,C对应的时间2.25s,B的时间是停留的时间1s,再换算成对应的百分比,这就是最终中间两个时间节点的计算方法。时间轴解析完成后,CSS部分的定义手到擒来:

@keyframes  move{
0%{transform:translateX(0)}
18.75%, 43.75%{transform:translateX(200px)} /*对应停留的1s*/
100%{transform:translateX(800px)}
}

case-关键帧演示-第一个驿站停留1s

重点看红色的部分,那里就是跃迁的时间点,在无时间变化的情况下位移了200px。按照时间轴的分析,CSS部分理论上是这样的:

@keyframes  move{
0%{transform:translateX(0)}
25%,50%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)}
100%{transform:translateX(800px)}
}

效果如何呢?

完全和想象的不一样,问题出在哪里呢?就是时间的50%节点处,浏览器可不知道你真实的想法,它只会以为你定义错了,当有两个相同的50%的关键帧的不同属性值定义时,会自动忽略第一个,而以最后一个有效值为准,所以上面的定义相当于给浏览器传达的讯息是这样的:

详解CSS动画属性关键帧keyframes全解析

扫一扫手机访问