关键帧动画是在时间轴上定义关键帧并指定其属性值的动画技术。
百分比用于表示动画的时间进度，从而确定在特定时间节点上动画元素应该具有的属性值。

关键帧动画应用

以下是一个简单的CSS关键帧动画示例：

css
Copy code
@keyframes myAnimation {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0);
  }
}

.myElement {
  animation: myAnimation 3s infinite;
}

在这个例子中，@keyframes 定义了一个名为 myAnimation 的关键帧动画，其中0%、50%和100%分别表示动画的不同阶段。在CSS选择器 .myElement 中，animation 属性将动画应用于具有类名 myElement 的元素，使其以3秒为周期无限循环播放。

动画属性

animation 属性是一个用于同时设置多个动画属性的 CSS 属性。它提供了一种简便的方式来定义动画，包括动画名称、持续时间、时间函数、延迟和重复次数等。

语法如下：

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

具体解释：

• name: 规定要应用的 @keyframes 动画的名称，或者是由关键帧组成的动画。
• duration: 规定完成动画所花费的时间，以秒（s）或毫秒（ms）为单位。
• timing-function: 规定动画的时间曲线，可以使用关键词（如 ease、linear 等）或者贝塞尔曲线函数。
• delay: 规定在动画开始之前的延迟时间，以秒（s）或毫秒（ms）为单位。
• iteration-count: 规定动画应该播放的次数，可以是具体的次数（整数）或者 infinite 表示无限循环。
• direction: 规定是否应该轮流反向播放动画。可选值有 normal（默认值，正向播放），reverse（反向播放），alternate（正向、反向交替），alternate-reverse（反向、正向交替）。
• fill-mode: 规定在动画之前和之后如何应用样式。可选值有 none、forwards、backwards 和 both。
• play-state: 规定动画是运行还是暂停。可选值有 running（默认值，运行中）和 paused（暂停）。
  以下是一个示例：

.myElement {
  animation: myAnimation 2s ease-in-out 1s infinite alternate;
}

在这个例子中，.myElement 元素将应用名为 myAnimation 的动画，动画持续时间为2秒，时间函数为缓入缓出，延迟1秒开始，无限循环并在每次交替时反向播放。