CSS动画关键帧keyframes深度解析

"详解CSS动画属性关键帧keyframes全解析" CSS关键帧`@keyframes`是CSS3动画的核心部分，允许开发者定义一个动画的过程，控制元素在特定时间点的样式变化，从而创建出复杂的动态效果。`keyframes`规则定义了一个动画从开始到结束的中间状态，这些状态被称为关键帧。 在例子中，我们创建了一个名为`move`的关键帧动画，让一个圆圈从左向右滚动。这个动画分为两个关键帧：0%和100%。在0%的关键帧，圆圈的`transform`属性设置为`translateX(0)`，即初始位置在X轴上为0；在100%的关键帧，`transform`设置为`translateX(800px)`，表示4秒后圆圈将移动到800像素的位置。应用这个动画的类为`.c_move`，设置了动画的持续时间为4秒，速度曲线为`linear`（匀速），并且`animation-fill-mode`设为`both`，意味着动画结束后圆圈会停留在终点。 接下来，为了使圆圈在起点停留2秒再开始移动，我们可以使用`animation-delay`属性。在`.c_move`类中添加`animation-delay: 2s;`，这样圆圈将在页面加载后等待2秒才开始执行动画。 然而，仅靠`animation-delay`无法实现圆圈在中途停留的效果。要让圆圈在特定位置暂停，我们需要在`@keyframes`规则中增加更多的关键帧。例如，我们可以添加50%的关键帧，让圆圈在一半路径（400px）处停留。代码如下： ```css @keyframes move { 0% { transform: translateX(0); } 50% { transform: translateX(400px); /* 在这里设置停留样式，比如增加透明度或改变颜色等 */ } 100% { transform: translateX(800px); } } .c_move { animation: move 4s linear both; animation-delay: 2s; } ``` 通过这种方式，圆圈会在起点等待2秒，然后移动到400px的位置并停留，最后到达终点。如果希望圆圈在每个驿站停留不同的时间，只需在关键帧中添加更多百分比并相应设置样式和停留时间。 此外，还可以使用百分比之外的关键帧名称，例如`from`和`to`分别代表0%和100%，或者使用`@animation`的简写形式来创建动画。关键帧中的样式可以包括任何可以应用于元素的CSS属性，不仅限于`transform`，还可以包括`opacity`、`background-color`等，创造出丰富多样的动画效果。 总结，`@keyframes`是CSS3动画中的强大工具，通过定义关键帧，我们可以精确控制元素在动画过程中的行为，创造出平滑、细腻的过渡效果。结合`animation`属性，我们可以指定动画的播放速度、延迟、次数等，以实现各种复杂且富有创意的交互设计。