看这篇就够了：一文梳理 CSS3 动画animation的用法

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 CSS 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

动画在网页设计和开发中扮演着重要角色，使用 CSS3 中的动画可以让网页有更加酷炫的效果，并吸引到用户的眼球，今天瑶琴带大家来学习或复习 CSS3 中 动画animation 的使用。

基本语法

animation 过渡的基本语法如下：

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

• name：指定动画的名称，通常是通过@keyframes规则定义的关键帧动画名称。

• duration：指定动画的持续时间，可以使用秒（s）或毫秒（ms）作为单位。

• timing-function：指定动画的时间函数，控制动画的速度曲线，常见的包括 ease、linear、ease-in、ease-out 等。

• delay：指定动画开始之前的延迟时间，同样可以使用秒或毫秒作为单位。

• iteration-count：指定动画的播放次数，可以使用数字或关键词如infinite（无限循环）。

• direction：指定动画的播放方向，可以是normal（正常方向）、reverse（反向）、alternate（交替）等。

• fill-mode：指定动画结束后元素样式的应用方式，如forwards（保持最后帧样式）。

• play-state：指定动画的播放状态，如running（播放）或paused（暂停）。

创建关键帧动画

要使用animation属性，首先需要创建关键帧动画（Keyframes）。关键帧动画允许指定动画中的不同状态和关键帧。例如：

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(200px);
  }
}

在上面的示例中，定义了一个名为 slide 的关键帧动画，它在 0%、50% 和 100% 的关键帧上分别定义了元素的位置。

上面创建的关键帧动画可以应用到元素上。通过 animation 属性，将动画绑定到指定元素上，如下：

.element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  /* 使用 "slide" 动画，持续 2 秒，时间函数为 ease-in-out，无限循环 */
  animation: slide 2s ease-in-out infinite;
}

这里将 slide 的关键帧动画应用到了一个名为 .element 的元素上。动画持续2秒，使用了 ease-in-out 的时间函数，并无限循环。

多重动画

也可以同时应用多个动画，并为每个动画指定不同的名称、持续时间、时间函数等。这些动画将按照声明的顺序依次播放。

.element {
  width: 100px;
  height: 100px;
  background-color: #3498db;
  /* 应用两个动画： "slide" 和 "rotate"，分别持续时间为 2 秒和 3 秒，具有不同的时间函数和无限循环 */
}
  animation: slide 2s ease-in-out infinite, rotate 3s linear infinite;
}

• animation 属性将两个动画应用到 .element 元素上，一个是 "slide" 动画，持续时间为 2 秒，使用 ease-in-out 时间函数，无限循环；另一个是 "rotate" 动画，持续时间为 3 秒，使用 linear 时间函数，也是无限循环。

动画事件

CSS3动画还支持动画事件，使用 JavaScript来监听这些事件，在动画的不同阶段执行自定义操作。常见的动画事件包括 animationstart、animationend 和 animationiteration。

var element = document.querySelector('.element');

element.addEventListener('animationstart', function(event) {
  console.log('Animation started');
});

element.addEventListener('animationend', function(event) {
  console.log('Animation ended');
});

element.addEventListener('animationiteration', function(event) {
  console.log('Animation iteration');
});

CSS3 动画是前端开发中非常有用的工具，也是前端开发必备的知识储备，它用于创建各种动画效果，从简单的过渡到复杂的动态交互。通过了解动画属性的用法和关键帧动画的创建，随着实践和深入学习，你也可以创建更复杂、更令人印象深刻的动画效果。

希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。