关键帧动画是在时间轴上定义关键帧并指定其属性值的动画技术。
百分比用于表示动画的时间进度，从而确定在特定时间节点上动画元素应该具有的属性值。
关键帧动画应用
以下是一个简单的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秒开始，无限循环并在每次交替时反向播放。
