CSS动画的基础：关键帧与动画属性

大奇鸭

于 2025-05-14 13:10:17 发布

阅读量369

点赞数 3

CC 4.0 BY-SA版权

文章标签： CSS动画 @keyframes规则 animation属性关键帧控制浏览器兼容性

本文链接：https://blog.csdn.net/weixin_31720909/article/details/147966995

背景简介

在现代网页设计中，CSS动画为用户界面带来了生动和交互性的体验。它不仅提升了用户体验，也增强了视觉吸引力。本章从基础出发，深入讲解了CSS动画的核心概念，包括如何通过 animation 属性和 @keyframes 规则来实现动画效果。

CSS动画的基本元素

动画属性

animation 属性是设置动画的起点，通过简写形式可以指定三个关键的值：

动画名称 ：为动画指定一个名称，以便在CSS中引用。
动画持续时间 ：设置动画完成一个周期所需的时间，单位为秒或毫秒。
循环次数 ：定义动画播放的次数，可以是一个具体的数字，也可以是 infinite 表示无限循环。

例如，一个名为 bobble 的动画，其持续时间为2秒，无限循环：

#hexagon {
  animation: bobble 2s infinite;
}

@keyframes规则

@keyframes 规则定义了动画的关键帧，即动画在特定时间点的具体状态。关键帧使用百分比来指定动画的时间点，0%表示动画的开始，100%表示动画的结束，而50%则表示动画的中途点。

@keyframes bobble {
  0% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(40px);
  }
  100% {
    transform: translateY(10px);
  }
}

关键帧与动画属性的关系

animation 属性和 @keyframes 规则是紧密联系的。动画属性中的名称需与 @keyframes 规则中定义的名称相匹配，否则动画将不会执行。此外， animation 属性的持续时间与 @keyframes 中的百分比值共同决定了关键帧的激活时刻。

动画的高级应用

除了基础的动画实现，书中还提到了如何处理更复杂的动画情况。例如，对于非标准的动画时长，你需要通过计算来确定关键帧的激活时间。这涉及到将动画时长乘以关键帧的百分比值。

#someWeirdShape {
  animation: blah 2.275s infinite;
}

@keyframes blah {
  0% {
    transform: translateY(10px);
  }
  25% {
    transform: translateY(20px);
  }
  33% {
    transform: translateY(80px);
  }
  90% {
    transform: translateY(30px);
  }
  100% {
    transform: translateY(10px);
  }
}

浏览器支持与兼容性

随着现代浏览器对CSS动画的良好支持，大多数情况下我们不需要添加供应商前缀。但在需要支持旧版浏览器时，可以使用像 -prefix-free 这样的库来自动处理兼容性问题。

总结与启发

通过对CSS动画基础的深入学习，我们了解到创建一个动画不仅需要了解 animation 属性和 @keyframes 规则，还需要对动画的时间和关键帧有精确的控制。掌握这些技能能够让我们在网页设计中实现更加流畅和吸引人的动画效果。本书的这一章节为我们提供了一个很好的起点，帮助我们克服了理解CSS动画的难点，让我们在未来的实践中更加自信和熟练。