CSS 动画允许你在不借助 JavaScript 或 Flash 的情况下，通过关键帧（@keyframes）来创建复杂的动画效果。通过使用 CSS 动画属性，你可以控制动画的名称、持续时间、延迟、重复次数、方向、速度曲线等。
1.定义动画的关键帧规则 @keyframes
@keyframes 是定义动画的关键帧规则。它允许你指定动画在不同时间点的样式。
语法：
@keyframes animationName {
from {
/* 初始样式 */
}
to {
/* 结束样式 */
}
}或者使用百分比：
@keyframes animationName {
0% {
/* 初始样式 */
}
50% {
/* 中间样式 */
}
100% {
/* 结束样式 */
}
}示例：
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}2.动画名称 animation-name
animation-name 指定要应用的动画名称，该名称应与 @keyframes 定义的动画名称一致。
语法：
animation-name: animationName;示例：
animation-name: slideIn;3.持续时间 animation-duration
animation-duration 指定动画的持续时间。
语法：
animation-duration: time;示例：
animation-duration: 2s;4.开始前的延迟时间 animation-delay
animation-delay 指定动画开始前的延迟时间。
语法：
animation-delay: time;示例：
animation-delay: 1s;5.重复次数 animation-iteration-count
animation-iteration-count 指定动画的重复次数。可以是具体数字或 infinite（无限循环）。
语法：
animation-iteration-count: number | infinite;示例：
animation-iteration-count: 3;6.播放方向 animation-direction
animation-direction 指定动画的播放方向。
语法：
animation-direction: normal | reverse | alternate | alternate-reverse;normal - 动画正常播放（向前）。默认值
reverse - 动画以反方向播放（向后）
alternate - 动画先向前播放，然后向后
alternate-reverse - 动画先向后播放，然后向前
示例：
animation-direction: alternate;7.动画的速度曲线 animation-timing-function
animation-timing-function 指定动画的速度曲线。
语法：
animation-timing-function: ease | ease-in | ease-out | ease-in-out | linear | cubic-bezier(n,n,n,n);ease - 指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear - 规定从开始到结束的速度相同的动画
ease-in - 规定慢速开始的动画
ease-out - 规定慢速结束的动画
ease-in-out - 指定开始和结束较慢的动画
cubic-bezier(n,n,n,n) - 运行您在三次贝塞尔函数中定义自己的值
示例：
animation-timing-function: ease-in-out;8.执行前后样式应用 animation-fill-mode
animation-fill-mode 指定动画在执行前和执行后如何应用样式。
语法：
animation-fill-mode: none | forwards | backwards | both;none - 默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards - 元素将保留由最后一个关键帧设置的样式值（依赖 animation-direction 和 animation-iteration-count）。
backwards - 元素将获取由第一个关键帧设置的样式值（取决于 animation-direction），并在动画延迟期间保留该值。
both - 动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性。
示例：
animation-fill-mode: forwards;
9.简写形式 animation
animation 是以上所有动画属性的简写形式。
语法：
animation: name duration timing-function delay iteration-count direction fill-mode;示例：
animation: slideIn 2s ease-in-out 1s 3 alternate forwards;完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Animation Example</title>
<style>
body {
padding: 300px;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation: slideIn 2s ease-in-out 1s 3 alternate forwards;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>在这个示例中，.box 元素将从左侧滑入，动画持续 2 秒，延迟 1 秒开始，重复 3 次，方向交替，并在动画结束后保持最终状态。
