如何在CSS中使用keyframes动画属性

这篇文章给大家介绍如何在CSS中使用keyframes动画属性，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

1.先来一个最基础的

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

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

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

基础的设置自然带来毫无特色平淡无奇的基础动效。

2.延迟开始

下面，我想让圆圈在起点停留2s后再开始移动，第一反应是用动画属性中的延迟 animation-delay ，把时间定义成2s，行不行？行，但这里用个更高级的方法。我们在定义关键帧时用了大量的百分比，这里百分比值代表的是 时间节点 ，也就是说 关键帧定义的是不同时间节点的状态属性。 下面再来看一张图，这张图一定不要和上面的路径演示弄混了，这是一张动画的时间轴的图。

让圆圈在起点停留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-关键帧演示-延迟开始

3.提前结束

有了延迟开始的基础，提前结束是不是已经可以类推出来了。为了区分一下，我让动画提前3s结束。照例先画出时间轴的解析。

对应关键帧的定义如下：

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

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

4.中途停留

那些已准备妥当的驿站，现在可以发挥作用了，我希望圆圈这样运动：整个旅程中仅在第一个驿站（移动200px后）停留1s，稍作整顿。映射到时间轴上是什么样子的呢？

这里，出现了一些看上去很奇怪的数字，需要解释一下。先来明确一点，我们分析时间轴，最终要获得是时间节点。针对我们的设计，停留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

5.像虫洞一样跳跃式前进

增加些难度，在中途任意点作停留已经不是什么问题了，停留在一个点和多个点是相同的思路，现在，我让圆圈跳跃式前进，进入第一个驿站后，停留1s，跨过第二个驿站，直接进入第三个驿站，停留1s，完成旅程。根据空间折叠原理，200和600处发生了跃迁。分析时间轴：

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

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

效果如何呢？

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

@keyframes  move{
0%{transform:translateX(0)}
25%{transform:translateX(200px)}
50%,75%{transform:translateX(600px)} /*在位移600px后停留1s*/
100%{transform:translateX(800px)}
}

这就是为什么看上去是到达第一驿站后加速跑向第三个驿站，然后停留后再完成剩下的路程的原因。现在游戏越来越有意思了，或许我们可以试试 骗过浏览器 。既然同样的时间点只允许定义一个属性值，那如果我在紧邻的旁边增加一个时间点来定义，会发生什么？

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

看上面出现的**50.0001%**这个时间点，猜猜发生了什么？这就是上面所谓的“骗过浏览器”的方法了。在50%→50.0001%这个区间，发生了400px（200→600）的位移变化。所以就得到了下面这种效果：case-关键帧演示-跃迁

关于如何在CSS中使用keyframes动画属性就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。