如何在CSS中创建动画_animation-name与关键帧使用技巧

答案是通过animation-name与@keyframes配合定义动画，使用语义化命名和百分比关键帧控制动画过程，并结合duration、timing-function等属性实现流畅效果，最后以简写形式优化代码。

在CSS中创建动画，核心是使用 animation-name 与 @keyframes 配合。通过定义关键帧来描述动画过程，再将这个动画名称应用到元素上，就能实现流畅的视觉效果。

animation-name 与 @keyframes 基本语法

animation-name 指定你想要使用的动画名称，而这个名称必须对应一个用 @keyframes 定义的动画规则。

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

.box {
  animation-name: slideIn;
  animation-duration: 1s;
}

上面代码中，@keyframes slideIn 定义了一个从左向右滑入的动画，animation-name: slideIn 将其绑定到 .box 元素。

使用百分比控制关键帧细节

除了 from 和 to，你还可以使用百分比精确控制动画的中间状态。

立即学习“前端免费学习笔记（深入）”；

一帧秒创

基于秒创AIGC引擎的AI内容生成平台，图文转视频，无需剪辑，一键成片，零门槛创作视频。

41

查看详情

@keyframes pulseMove {
  0% {
    transform: translateX(0);
    opacity: 0.5;
  }
  70% {
    transform: translateX(80px);
    opacity: 1;
  }
  100% {
    transform: translateX(60px);
    opacity: 0.8;
  }
}

这样可以在不同时间点设置属性值，实现更自然的过渡效果。

多个关键帧动画复用与命名技巧

你可以为不同动画起语义化名称，方便维护和复用。

• 使用动词+目标命名，如 fadeIn、rotateSpin、bounceIn
• 避免使用模糊名称如 anim1、testAnimation
• 可为同一元素组合多个动画（用逗号分隔）

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.text {
  animation-name: fadeIn;
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

结合其他 animation 属性提升效果

仅设置 animation-name 不足以完整控制动画，需配合其他属性：

• animation-duration：动画持续时间，如 0.5s 或 2s
• animation-timing-function：速度曲线，如 ease-in-out、cubic-bezier()
• animation-delay：延迟启动时间
• animation-iteration-count：播放次数，可设为 infinite
• animation-direction：是否反向播放，如 reverse 或 alternate

.box {
  animation: slideIn 1.5s ease-out 0.3s infinite alternate;
}

基本上就这些。掌握 animation-name 与 @keyframes 的配合，再合理使用关键帧百分比和动画参数，就能灵活创建各种CSS动画效果。不复杂但容易忽略细节，比如命名规范和性能优化（避免过度重绘）。

以上就是如何在CSS中创建动画_animation-name与关键帧使用技巧的详细内容，更多请关注php中文网其它相关文章！